• Vant React

Image 图片

介绍

增强版的 taro Image 组件，提供多种图片填充模式，支持图片懒加载、加载中提示、加载失败提示。

引入

import { Image } from "@taroify/core"

代码演示

基础用法

基础用法与原生 img 标签一致，可以设置 src、alt 等原生属性。
通过 width 和 height 设置图片大小，若未指定，会从style中读取width,height属性。
width和height若为number, 会经过 pxTransform 转换

<Image width={200} height={200} src="https://img.yzcdn.cn/vant/cat.jpeg" />

填充模式

通过 mode 属性可以设置图片填充模式，可选值见下方表格。

<Image
  width={200}
  height={200}
  mode="scaleToFill"
  src="https://img.yzcdn.cn/vant/cat.jpeg"
/>

圆形图片

通过 round 属性可以设置图片变圆。

<Image
  shape="round"
  width={200}
  height={200}
  src="https://img.yzcdn.cn/vant/cat.jpeg"
/>

图片懒加载

设置 lazyLoad 属性来开启图片懒加载。

<Image
  lazyLoad
  width={200}
  height={200}
  src="https://img.yzcdn.cn/vant/cat.jpeg"
/>

加载中，加载失败提示

通过 placeholder 设置加载中提示，通过 fallback设置加载失败提示

import { Photo, PhotoFail } from "@taroify/icons"

<Image width={200} height={200} placeholder="加载中..." />
<Image width={200} height={200} src="error" fallback="加载失败" />
<Image width={200} height={200} src="error" fallback={<PhotoFail />} />
<Image width={200} height={200} placeholder={<Photo />} />

API

Props

参数说明类型默认值
src图片链接string-
mode图片填充模式stringscaleToFill
alt替代文本string-
width宽度string|number-
height长度string|number-
shape图片形状 square rounded circleboolean-
lazyLoad是否开启图片懒加载booleanfalse
placeholder加载中提示ReactNode-
fallback加载失败提示ReactNode-

Modes

名称含义
scaleToFill缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
top裁剪模式，不缩放图片，只显示图片的顶部区域
bottom裁剪模式，不缩放图片，只显示图片的底部区域
center裁剪模式，不缩放图片，只显示图片的中间区域
left裁剪模式，不缩放图片，只显示图片的左边区域
right裁剪模式，不缩放图片，只显示图片的右边区域
topLeft裁剪模式，不缩放图片，只显示图片的左上边区域
topRight裁剪模式，不缩放图片，只显示图片的右上边区域
bottomLeft裁剪模式，不缩放图片，只显示图片的左下边区域
bottomRight裁剪模式，不缩放图片，只显示图片的右下边区域

Events

事件名说明回调参数
onClick点击图片时触发event: MouseEvent
onLoad图片加载完毕时触发-
onError图片加载失败时触发-

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称默认值描述
—image-placeholder-colorvar(var(—gray-6)-
—image-placeholder-font-sizevar(—font-size-md)-
—image-placeholder-icon-size32px * $hd-
—image-placeholder-icon-colorvar(—gray-4)-
—image-placeholder-background-colorvar(—background-color)-