类型:interface
抖音小程序图片加载组件属性。
类型:string
裁剪方式,参见抖音小程序文档-mode 的合法值。
类型:string
图片源 URL,满足公网可访问。不包含域名,例如 imagex-common/5b*******1b
。
类型:number
图片宽度,默认值为 300。仅当 layout
取值为 fill
时选填,其他布局为必填。
intrinsic
或 fixed
布局下:表示设置图片渲染宽度fill
或 responsive
布局下:表示设置图片宽高比类型:number
图片高度,默认值为 225。仅当 layout
取值为 fill
时选填,其他布局为必填。
intrinsic
和 fixed
布局下:表示设置图片渲染高度fill
和 responsive
布局下:表示设置图片宽高比类型: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>
类型:string
定义图片加载行为。
lazy
:(默认)懒加载eager
:立即加载类型:string
占位图类型。
empty
:(默认)无占位skeleton
:骨架屏占位data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAABlBMVEW/0v/K2/+wPdJoAAAAI0lEQVQImWNghAMGEGZggDAZIIARxgCxGQgAFG1QnVBzoQAACT8AKbEcZzAAAAAASUVORK5CYII=
类型:string
自定义图片加载错误占位图,建议您传入 base64 编码的占位图。
类型:number
质量参数。默认值为 75,取值范围为[0, 100]。取值越低,压缩率越高,图片越模糊。
类型:string[]
自适应格式列表,结合 loader 方法实现格式自适应。取值如下所示:
webp
(默认)avif
jpeg
png
注意
图像格式自适应是一种图像压缩方式,SDK 会根据配置自动进行格式压缩并输出对应格式图像。
类型:number
图片尺寸列表,默认为[480, 750, 1080, 1366, 1920],组件从该列表中选取最合适的图片大小。
注意
传入空数组 [] 情况下,组件会计算图片或其所在容器大小,直接拉取相应大小的图片(若设置为空数组在一定程度上会降低 cdn 的命中率)。
类型:boolean
是否关闭图片优化。
true
:关闭,关闭图片优化后将不再支持格式自适应、分辨率自适应能力。false
:(默认)开启。类型:string
图片加载错误时,用于占位的说明文字。