Image 图片

引入

在或index.json中引入组件，详细介绍见

基础用法

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

填充模式

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

通过round属性可以设置图片变圆，注意当图片宽高不相等且fit为contain或时，将无法填充一个完整的圆形。

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

图片懒加载

加载中提示

Image组件提供了默认的加载中提示，支持通过loading插槽自定义内容

  1. <van-image use-loading-slot>
  2.   <van-loading
  3.     slot="loading"
  4.     type="spinner"
  5.     size="20"
  7. </van-image>

加载失败提示

Image组件提供了默认的加载失败提示，支持通过error插槽自定义内容

API

图片填充模式

Events

Slots