ImageProps

类型：interface

抖音小程序图片加载组件属性。

mode

类型：string

裁剪方式，参见抖音小程序文档-mode 的合法值。

src

类型：string

图片源 URL，满足公网可访问。不包含域名，例如 imagex-common/5b*******1b。

width

类型：number

图片宽度，默认值为 300。仅当 layout 取值为 fill 时选填，其他布局为必填。

• 在 intrinsic 或 fixed 布局下：表示设置图片渲染宽度
• 在 fill 或 responsive 布局下：表示设置图片宽高比

height

类型：number

图片高度，默认值为 225。仅当 layout 取值为 fill 时选填，其他布局为必填。

• 在 intrinsic 和 fixed 布局下：表示设置图片渲染高度
• 在 fill 和 responsive 布局下：表示设置图片宽高比

loader

类型：string

unoptimized 取值为 false 时，为必填。

图片 URL 拼接函数。格式自适应和分辨率自适应能力均依赖该属性实现。

注意

在配置 loader 属性之前，请使用 registerLoader 方法注册对应的 loader 函数。示例如下所示。

示例

// 首先声明所需要的 loader 函数，并进行注册
const loaderFunc = (props: ImageLoaderProps) => {
  const {src, width, quality, format} = props
  return `//example.com/${src}~tplv-serviceId-resize:${width}:q${quality}.${format}`
}
// 将 loaderFunc 注册为 key=myLoader
registerLoader("myLoader", loaderFunc)

// 使用时将对应的 key 传递给组件即可，组件内会根据 key 查找对应的 loader 函数
<imagex-viewer
  loader="myLoader"
  // ...other props
>
</imagex-viewer>

loading

类型：string

定义图片加载行为。

• lazy：（默认）懒加载
• eager ：立即加载

placeholder

类型：string

占位图类型。

• empty：（默认）无占位
• skeleton：骨架屏占位
• 自定义占位图，例如：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAABlBMVEW/0v/K2/+wPdJoAAAAI0lEQVQImWNghAMGEGZggDAZIIARxgCxGQgAFG1QnVBzoQAACT8AKbEcZzAAAAAASUVORK5CYII=

errorDataUrl

类型：string

自定义图片加载错误占位图，建议您传入 base64 编码的占位图。

quality

类型：number

质量参数。默认值为 75，取值范围为[0, 100]。取值越低，压缩率越高，图片越模糊。

formats

类型：string[]

自适应格式列表，结合 loader 方法实现格式自适应。取值如下所示：

• webp （默认）
• avif
• jpeg
• png

注意

图像格式自适应是一种图像压缩方式，SDK 会根据配置自动进行格式压缩并输出对应格式图像。

• 若指定为 ['webp']，表示仅支持 webp 格式自适应；
• 若指定为 ['avif', 'webp']，表示优先 avif 格式自适应，其次是 webp 格式自适应。若自适应格式均无法使用，则使用原图格式兜底。

imageSizes

类型：number

图片尺寸列表，默认为[480, 750, 1080, 1366, 1920]，组件从该列表中选取最合适的图片大小。

注意

传入空数组 [] 情况下，组件会计算图片或其所在容器大小，直接拉取相应大小的图片（若设置为空数组在一定程度上会降低 cdn 的命中率）。

unoptimized

类型：boolean

是否关闭图片优化。

• true：关闭，关闭图片优化后将不再支持格式自适应、分辨率自适应能力。
• false：（默认）开启。

alt

类型：string

图片加载错误时，用于占位的说明文字。