Image 图片

引入

  1. import{Image}from'vant';
  2. Vue.use(Image);

代码演示

基础用法

  1. <van-image
  2. width="100"
  3. height="100"
  4. src="https://img.yzcdn.cn/vant/cat.jpeg"
  5. />

填充模式

  1. <van-image
  2. width="10rem"
  3. height="10rem"
  4. fit="contain"
  5. src="https://img.yzcdn.cn/vant/cat.jpeg"
  6. />

图片懒加载

  1. <van-image
  2. width="100"
  3. height="100"
  4. lazy-load
  5. src="https://img.yzcdn.cn/vant/cat.jpeg"
  6. />
  1. import{Lazyload}from'vant';
  2. Vue.use(Lazyload);

加载中提示

Image组件提供了默认的加载中提示,可以通过loading插槽自定义加载中提示

  1. <van-imagesrc="https://img.yzcdn.cn/vant/cat.jpeg">
  2. <templatev-slot:loading>
  3. <van-loadingtype="spinner"size="20"/>
  4. </template>
  5. </van-image>

加载失败提示

Image组件提供了默认的加载失败提示,可以通过error插槽自定义加载失败提示

  1. <van-imagesrc="https://img.yzcdn.cn/vant/cat.jpeg">
  2. <templatev-slot:error>
  3. <van-iconname="close"size="20"/>
  4. </template>
  5. </van-image>

API

Props

参数说明类型默认值版本
src图片链接String--
fit图片填充模式Stringfill-
alt替代文本String--
width宽度,默认单位为 pxString | Number--
height高度,默认单位为 pxString | Number--
lazy-load是否开启图片懒加载,须配合 Lazyload 组件使用Booleanfalse-

图片填充模式

名称含义
contain保持宽高缩放图片,使图片的长边能完全显示出来
cover保持宽高缩放图片,使图片的短边能完全显示出来,裁剪长边
fill拉伸图片,使图片填满元素
none保持图片原有尺寸
scale-downnonecontain中较小的一个

Events

事件名说明回调参数
click点击图片时触发event: Event
load图片加载完毕时触发-
error图片加载失败时触发-

Slots

名称说明
loading自定义加载中的提示内容
error自定义加载失败时的提示内容

Image 图片 - 图1