IImageLoaderProps

Loader 函数返回的参数，用于组装最终加载的图片 URL。

类型

{
  src: string;
  format: string;
  extra: {
    domain?: string;
    protocol?: ProtocolType;
    template?: string;
    suffix?: string;
    search?: string;
    origin: string;
  };
}

成员

IImageLoader

图片 URL 生成函数。函数入参包含 domain, src, format 等参数，返回拼接处理参数后的 url。格式自适应依赖该函数实现。

类型

(props: IImageLoaderProps) => string

示例

const myLoader = ({ src, format }) => {
  return `//www.example.com/${src}~tplv-serviceid-image.${format}`
}

ISSRConfig

SSR（服务端渲染）配置，该配置用于在 SSR 配置场景提升图片加载速度，参与了服务端渲染的图片需要配置该属性。

注意

CSR 场景，即客户端渲染场景下无需关注该配置。

类型

{
  isSSR?: boolean;
  hybridRender?: boolean;
  platform?: typeof ValidPlatform[number];
}

成员

IImageProps

类型：interface

同层渲染图片组件属性。

width

类型：string | number

图片渲染宽度，值类型与 css 的 width 一致。

height

类型：string | number

图片渲染高度，值类型与 css 的 height 一致。

src

类型：string

图片路径，可访问的图片 URL。

loader

类型：IImageLoader

图片 URL 生成函数。

formats

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

自适应格式列表，结合 loader 方法实现格式自适应，在同层渲染场景下优先采用 heic 格式，不支持同层渲染时走格式自适应的方式。默认值为 ['heic', 'avif', 'webp']。

• heic
• avif
• webp

注意

• 指定为 ['webp']时，表示仅支持 webp 格式自适应，并以原图格式兜底；
• 指定为 ['heic', 'avif', 'webp']时，表示优先 heic 格式自适应，其次是 avif、webp 格式自适应，最后用原图格式兜底。

objectFit

类型：IImageObjectFitValues | undefined

用于指定图片元素如何适应容器，与 css 属性 object-fit 相同。其中容器范围由 width、height 定义。

cornerRadius

类型：string | undefined

圆角半径，支持以下两种类型：

• 具体像素值，如：1px。
• 百分比值，如：10%。在 iOS 同层场景下，百分比会相对组件宽度进行计算。

ssrConfig

类型：ISSRConfig | undefined

SSR（服务端渲染）配置。

IImageObjectFitValues

用于指定图片元素如何适应容器，与 css 属性 object-fit 相同。

类型

'none' | 'contain' | 'cover' | 'fill'