You need to enable JavaScript to run this app.
导航
属性
最近更新时间:2024.07.19 19:49:48首次发布时间:2024.07.19 19:49:48

ImageLoaderProps

类型:interface

Loader 函数返回的参数,用于拼接最终加载的图片 URL。

src

类型:string

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

width

类型:number

图片宽度,用于确定加载的图片尺寸。

quality

类型:number

图片质量参数,用于确定加载的图片质量。

format

类型:string

图片格式,用于确定加载的图片格式。

ImageLoader

图片 URL 拼接函数,该函数根据传入的参数(src、width、quality 和 format)生成图片的 URL。

类型

(props: ImageLoaderProps) => string

示例

// 域名/src~模板:模板参数:q质量参数.图片格式
const myLoader: ImageLoader = ({ src, width, quality, format }) => {
  return `//www.example.com/${src}~tplv-serviceid-resize:${width}:q${quality}.${format}`
}

PlaceholderValue

占位元素。

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

类型

'skeleton' | 'empty' | (string & {})

OnLoadingComplete

图片加载后的回调函数,参数为图片实际的宽高,单位为 px。

类型

(result: {
  naturalWidth: number
  naturalHeight: number
}) => void

ViewerProps

类型:interface

组件属性。

width

类型:number | undefined

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

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

height

类型:number | undefined

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

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

src

类型:string

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

layout

类型:"fill" | "fixed" | "intrinsic" | "responsive" | "raw" | undefined

布局方式。

  • intrinsic:(默认)图片宽度自适应容器,最大宽度为组件中设置的图片宽度,图片高度按照原图比例进行缩放。
  • responsive:图片宽度完全自适应容器,图片高度按照原图比例进行缩放。
  • fixed:固定的图片宽高。
  • fill:填充容器,结合 objectFit、objectPosition 可实现多种填充模式。
  • raw:移除外层布局相关 dom,只保留纯净的 <img> 标签。

loader

类型:ImageLoader | undefined

图片 URL 拼接函数。

loading

类型:"lazy" | "eager" | undefined

图片加载行为。

  • lazy:(默认)懒加载
  • eager:立即加载

placeholder

类型:PlaceholderValue | undefined

占位元素。

errorDataURL

类型:string | undefined

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

quality

类型:number | undefined

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

formats

类型:("webp" | "avif" | "heic" | "jpeg" | "png")[] | undefined

自适应格式列表,结合 loader 方法实现格式自适应。

  • webp(默认)
  • avif
  • jpeg
  • png

注意

  • 指定 ['webp']时,表示仅支持 webp 格式自适应;
  • 若指定为 [avif, webp] 则表示优先 avif 格式自适应,其次是 webp 格式自适应,最后用原图格式兜底。

imageSizes

类型:number[] | undefined

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

注意

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

unoptimized

类型:boolean | undefined

是否关闭图片优化。

  • true:关闭,关闭图片优化后将不再支持格式自适应、分辨率自适应能力。
  • false:(默认)开启。

lazyRoot

类型:HTMLElement | null | undefined

图片懒加载配置,指向图片所在的容器元素。默认值为 null,指向当前视口。

lazyBoundary

类型:string | undefined

懒加载时触发图片渲染的边界,默认值为 200px

objectFit

类型:string | undefined

layout 取值为 fill 时,用于指定图片元素如何适应容器,与 css 属性 object-fit 相同。

objectPosition

类型:string | undefined

layout 取值为 fill 时,用于指定图片元素在容器内的位置,与 css 属性 object-position 相同。

onLoadingComplete

类型:OnLoadingComplete | undefined

图片加载后的回调函数,参数为图片实际的宽高,单位为 px。

plugins

类型:string[] | undefined

启用的插件名,当前仅支持取值 decrypt,表示解密插件。

pluginProps

类型:Record<string, any>

插件配置,key 为插件名,value 为对应插件配置。

注意

解密插件配置:

  • pem:您在 veImageX 控制台获取的公钥,用于解密对称密钥。
  • key:您在上传 SDK 用于加密文件的对称密钥,用于解密加密后文件。