Vant Image picture

Introduced

Enhanced img tab with a variety of picture fill modes that support lazy, in-load, and fail-loading prompts

Introduced

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

Vue.use(Image);

Code demo

Basic usage

The underlying usage is consistent with the native img label, and native properties such as src, width, height, alt can be set

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

Fill mode

The fit property allows you to set the picture fill mode, with optional values in the table below

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

Round picture

The rund property allows you to circle a picture, noting that a complete circle cannot be filled when the picture is uneconciable in width and fit is contain or scale-down.

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

The picture is lazy to load

Setting the lazy-load property to turn on picture lazy loading needs to be used with the Lazyload component

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

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

Vue.use(Lazyload);

Hints in the load

The Image component provides default loading prompts that support custom content through the loading slot

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

Loading failure prompt

The Image component provides the default load failure prompt and supports custom content through the error slot

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

Api

Props

Image padding mode

Events

Slots