Image 图片

可预览的图片，在保留所有原生 img 的特性下，支持懒加载，自定义占位图片、加载失败等

演示

基础用法

适应容器

可以通过 fit 确定图片如何适应到容器框，同原生 object-fit CSS 属性；如果不填浏览器默认为 fill

占位

使用 placeholder 定义图片加载时显示的图片；通常用于加载大图时用来实现渐进加载，将 placeholder 设置为一个原图模糊后的图片

加载失败

通过配置 fallback 配置加载失败显示图像占位符; 也可以传递 custom-fallback 启用自定义加载失败占位符, 然后配置 slot-fallback 来自定义加载失败显示.

禁用预览

使用 preview-disabled 来禁止预览

多图预览

可通过 previewSrcList 开启预览多图的功能。 可以通过 initial-index 初始化第一张预览图片的位置。 默认初始位置为 0。

懒加载

通过使用浏览器原生支持的 loading 属性来开启懒加载，只需要设置 loading="lazy"

从 ios 15.4 开始已经全面支持; 对于不支持 loading="lazy" 属性的浏览器，可以通过 loading-attribute-polyfill 来兼容

手动预览

如果不想通过 Image 组件来预览图片，也可以手动通过使用 ImagePreview 来预览图片

API

Image Props

参数	说明	类型	默认值
src	必填 , 图片源地址，同原生属性一致	string	—
width	宽度	string	-
height	高度	string	-
alt	原生属性 alt	string	-
loading	原生属性, 浏览器加载图像的策略	eager、lazy	eager
fit	确定图片如何适应容器框，同原生 object-fit	string	-
fallback	图片加载失败时显示的地址	string	-
placeholder	图片占位, 用于加载大图时的占位	string	-
preview-disable	禁用图片预览	boolean	false
preview--src-list	预览图片地址列表, 多图预览时使用	string[]	-
initial-index	初始预览图像索引	number	0