You need to enable JavaScript to run this app.
导航
属性
最近更新时间:2024.09.30 11:47:35首次发布时间:2024.09.30 11:47:35

ImageProps

类型:interface

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

mode

类型:string

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

src

类型:string

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

width

类型:number

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

  • intrinsicfixed 布局下:表示设置图片渲染宽度
  • fillresponsive 布局下:表示设置图片宽高比

height

类型:number

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

  • intrinsicfixed 布局下:表示设置图片渲染高度
  • fillresponsive 布局下:表示设置图片宽高比

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

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