添加与使用素材

素材让仪表可以显示自己的徽章、图案或标识。当前版本只支持图片素材，文件选择和相册选择也只接受图片；视频、音频和其他文件暂不能作为素材使用。

添加素材

在编辑器里收起键盘。
打开素材管理。
从相册或文件中选择图片。
等素材出现在列表后，复制它的源码标记。
用 Image 组件引用这个标记，再打开预览。

新上传素材的标记通常是一段哈希文件名，例如 a1b2…c3.png。请复制完整标记，不要手工省略中间字符，也不要使用相册中的原始名称或系统文件路径。

jsx

function main() {
  return <Image source="把这里替换为完整素材标记.png"
    width={80} height={80} contentMode="fit"/>;
}

上面的标记是待替换位置。想直接运行带素材的版本，可下载素材徽章示例，示例包已经包含对应资源。

素材限制

项目	当前限制
类型	能被系统解码的图片素材
单个素材体积	不超过 8 MB
单个素材像素数	不超过 4000 万像素
每个仪表的素材标记数量	最多 64 个
显示解码	按显示需要下采样，最大边 2048 像素

重复上传完全相同的图片会复用已有素材。为了获得清晰的图案边缘，优先选择尺寸适中、带透明通道的 PNG；不必为了几十点大小的图标上传超大照片。

适应与填满

contentMode="fit"：完整显示素材，可能留白。适合徽章、Logo、图标。
contentMode="fill"：填满组件区域，可能裁切。适合背景照片或装饰图块。

jsx

<Image source="badge.png" width={72} height={72} contentMode="fit"/>
<Image source="photo.png" width={120} height={80} contentMode="fill" cornerRadius={12} clipped={true}/>

这里的 badge.png、photo.png 是说明名称，使用时应换成自己的真实标记。

在键盘上方插入标记

有素材时，键盘工具栏会提供素材入口。展开后点击一项，即可把其标记插入代码光标处。它只插入名称，不会替你完成整段 <Image .../> 代码。

删除、复制与分享

删除素材前，先搜索代码里是否仍引用了它的标记。删除后引用不会自动改成其他素材；缺失的内容应通过预览和日志排查。

复制仪表会复制它的素材。导出的 ZIP 会携带源代码用到的素材目录，接收方不需要去同一个相册里寻找原图。素材的版权与分享范围由你自行确认。

添加与使用素材 ​

添加素材 ​

素材限制 ​

适应与填满 ​