增强版的 img ，提供多种填充模式，懒加载、加载中、加载失败

import Vue from 'vue';import { Image } from 'vant';

Vue.use(Image);

基础与原生一致，可以设置src、width、height、alt等原生

<van-image
  width="100"
  height="100"
  src="https://img.yzcdn.cn/vant/cat.jpeg" rel="external "  rel="external "  rel="external "  rel="external "  rel="external "  rel="external " 
/>

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

<van-image
  width="10rem"
  height="10rem"
  fit="contain"
  src="https://img.yzcdn.cn/vant/cat.jpeg" rel="external "  rel="external "  rel="external "  rel="external "  rel="external "  rel="external " 
/>

通过round可以设置变圆，注意当宽高不相等且fit为contain或scale-down时，将无法填充完整的圆形。

<van-image
  round
  width="10rem"
  height="10rem"
  src="https://img.yzcdn.cn/vant/cat.jpeg" rel="external "  rel="external "  rel="external "  rel="external "  rel="external "  rel="external "
/>

设置lazy-load来开启懒加载，需要搭配  组件使用

<van-image
  width="100"
  height="100"
  lazy-load
  src="https://img.yzcdn.cn/vant/cat.jpeg" rel="external "  rel="external "  rel="external "  rel="external "  rel="external "  rel="external " 
/>

import Vue from 'vue';import { Lazyload } from 'vant';

Vue.use(Lazyload);

Image组件提供了认的加载中，通过loading插槽

<van-image src="https://img.yzcdn.cn/vant/cat.jpeg" rel="external "  rel="external "  rel="external "  rel="external "  rel="external "  rel="external " >
  <template v-slot:loading>
    <van-loading type="spinner" size="20" />
  </template>
</van-image>

Image组件提供了认的加载失败，通过error插槽

<van-image src="https://img.yzcdn.cn/vant/cat.jpeg" rel="external "  rel="external "  rel="external "  rel="external "  rel="external "  rel="external " >
  <template v-slot:error>加载失败</template></van-image>

API

演示

@H_276_@