# 组件支持

使用接口或者 SDK 方法上传文件成功后，会得到文件 `fileID` ，可以直接将此 `fileID` 填入微信小程序的组件 `src` 等属性中，或一些基础库方法属性中。

**需要注意：fileID 的直接访问遵循对象存储的权限配置，如遇到权限拒绝等原因，请先检查权限配置；刚配置的权限请等待 3-5 分钟后再试，CDN 正在全网生效。**

## 支持的组件

小程序组件支持传入云文件 ID，支持列表如下：

|组件名|描述|属性|
|---|---|---|
|[image](/miniprogram/dev/component/image.md)|图片|src|
|[video](/miniprogram/dev/component/video.md)|视频|src、poster|
|[cover-image](/miniprogram/dev/component/cover-image.md)|覆盖原生图片|src|

## 支持的方法

|方法名称|接口|参数|
|---|---|---|
|背景音频管理器|[getBackgroundAudioManager](/miniprogram/dev/api/media/background-audio/wx.getBackgroundAudioManager.md)|src|
|音频播放管理器|[createInnerAudioContext](/miniprogram/dev/api/media/audio/wx.createInnerAudioContext.md)|src|
|全屏预览图片|[previewImage](/miniprogram/dev/api/media/image/wx.previewImage.md)|urls、current|

## 资源复用下使用

目前微信小程序还没有原生支持资源复用情况下的 `fileID` 传入。表现效果是：

「小程序 A」的「环境 E」，「小程序 A」可以访问「环境 E」的资源；而「环境 E」共享给「小程序 B」后，「小程序 B」会显示找不到此路径，或者资源拒绝等错误。

目前给出一些中转方案，请选择合适的：

### 1. 全读情况下，直接进行 id 转换

如果你的资源默认开放所有人可读，则可以使用 wxs 标签处理一下 fileid。如下例子：

在页面的 wxml 同级目录中创建一个文件，名字为 `tool.js`

``` js
function loadcos(url){
  var res = url
  if (url.indexOf('cloud://') === 0) {
    var first = url.indexOf('.')
    var end = url.indexOf('/', first)
    res = 'https://' + url.slice(first + 1, end) + '.tcb.qcloud.la/' + url.slice(end + 1, url.length)
  }
  return res
}

module.exports={
  loadcos:loadcos
}
```

然后在 wxml 中参照下面填写：

``` html
<wxs module="tool" src="./tool.wxs"></wxs>
<image src="{{tool.loadcos(cloudid)}}"></image>
```

其中上面 cloudid，是在页面 js 文件中 data 数据。

#### 2. 权限读情况下，后端直接返回对应的 HTTP

如果你的资源有权限读，则建议直接由后端控制。

或者自己用[获取临时链接](gettempurl)方法封装一个预加载方法。