Image 图片

不同填充模式的图片

提供 fill、contain、cover、none、scale-down 5 种填充类型。

在 Stackblitz 中打开

不同填充位置的图片

当图片过大时,提供显示图片的局部左侧对齐、或右侧对齐的不同位置。

在 Stackblitz 中打开

不同形状的图片

提供方形、圆角方形、圆角 3 种形状。 当图片长宽不相等时,无法使用 circle 展示一个正圆。

在 Stackblitz 中打开

组件状态

在 Stackblitz 中打开

Image Props

名称类型默认值描述必传
altString-图片描述N
errorString / Slot / Function-自定义图片加载失败状态下的显示内容。TS 类型:string \| TNode通用类型定义N
fallbackString-图片加载失败时,显示当前链接设置的图片地址。如果要使用组件图标或完全自定义加载失败时显示的内容,请更为使用 errorN
fitStringfill图片填充模式。可选项:contain/cover/fill/none/scale-downN
lazyBooleanfalse是否开启图片懒加载N
loadingString / Slot / Function-自定义加载中状态的图片内容,如:“加载中”。TS 类型:string \| TNode通用类型定义N
positionStringcenter等同于原生的 object-position 属性,可选值为 top right bottom left 或 string,可以自定义任何单位,px 或者 百分比N
referrerpolicyString-<img> 标签的原生属性,MDN 定义。可选项:no-referrer/no-referrer-when-downgrade/origin/origin-when-cross-origin/same-origin/strict-origin/strict-origin-when-cross-origin/unsafe-urlN
shapeStringsquare图片圆角类型。可选项:circle/round/squareN
srcString-图片链接N
srcsetObject-图片链接集合,用于支持特殊格式的图片,如 .avif.webp。会优先加载 srcset 中的图片格式,浏览器不支持的情况下,加载 src 设置的图片地址。TS 类型:ImageSrcset interface ImageSrcset { 'image/avif': string; 'image/webp': string; }详细类型定义N
onErrorFunctionTS 类型:(context: { e: ImageEvent }) => void
图片加载失败时触发
N
onLoadFunctionTS 类型:(context: { e: ImageEvent }) => void
图片加载完成时触发
N

Image Events

名称参数描述
error(context: { e: ImageEvent })图片加载失败时触发
load(context: { e: ImageEvent })图片加载完成时触发

CSS Variables

组件提供了下列 CSS 变量,可用于自定义样式。

名称默认值描述
--td-image-color@font-gray-3-
--td-image-loading-bg-color@bg-color-secondarycontainer-
--td-image-loading-color@font-gray-3-
--td-image-round-radius@radius-default-

何时使用

当需要对图像内容进行陈列、展示,以便用户快速了解图像信息时使用。

组件搭配使用

可使用宫格单元格承载图片,作为某种功能、某类信息的入口。

图片与下拉刷新组合使用,用于图片瀑布流时的内容更新。

推荐/慎用示例

当图片仅为展示,不具备预览功能时,应避免图片尺寸过小,从而影响图像信息的浏览和获取。

相似组件

组件名何时使用
图片预览当需要对展示的图片进行快速查看,以及在查看时存在放大、缩小、删除等操作诉求时使用。