应用的开发离不开图片的展示，Vant 将原生的img元素封装成增强版的image组件，并提供了多种图片填充的模式，使图片能按指定的方式呈现和缩放，同时，还支持图片懒加载，加载中提示，加载失败提示等，详细的属性如下表11-2所示。
在上表11.2中，fit是一个用于填充图片的属性，填充时可以选择多种模式，不同的模式决定了不同的填充效果，填充的模式如下表11-3所示。
接下来通过一个完整的案例来演示Image组件的各种属性和加载时状态。
实例11-2 Image组件
1. 功能描述
创建一个页面，使用Vant中的Image组件，分别显示正常图片，不同模式填充图片和加载中及加载异常的图片效果。
2. 实现代码
在项目的components 文件夹中，添加一个名为“Image”的.vue文件，该文件的保存路径是“components/ch11/base/”，在文件中加入如清单11-2所示代码。
代码清单11-2 Image.vue代码
<template><h3>Image 组件</h3><div class="row"><p>基础用法</p><van-image class="img" :src="logo2" /></div><div class="row"><p>填充模式</p><van-image class="img" :src="logo2" :fit="item"v-for="(item, index) in fit" :key="index"><div class="tip">{{ item }}</div></van-image></div><div class="row"><p>加载过程与异常</p><div class="row-item"><div><van-image class="img" :src="logo3"><template v-slot:loading><van-loading type="spinner" size="20" /></template></van-image><div class="tip">加载中</div></div><div><van-image class="img"
src="https://123.com/456.png"><template v-slot:error>没加载出来</template></van-image><div class="tip">加载异常</div></div></div></div>
</template>
<script>
import logo2 from "../../../assets/logo2.png"
export default {data() {return {logo2: logo2,fit: ["fill", "contain", "none"]}}
}
</script>
<style scoped>
.row {margin: 10px 0;padding: 10px 0;border-bottom: solid 1px #eee;
}.row .row-item {display: flex;
}.row .img {width: 100px;height: 100px;margin-right: 5px;border: solid 1px #ccc;
}.row .img .tip,
.row .row-item .tip {text-align: center;
}
</style>4. 页面效果
保存代码后，页面在Chrome浏览器下执行的页面效果如图11-4所示。
4. 源码分析
Image是一款常用组件，首先使用Image组件正常加载图片，然后采用遍历的方式加载不同填充模式下的图片，最后演示加载中和加载异常时的图片。在选择图片填充模式时，fill模式下图片会有拉伸和变形的情况，建议使用contain模式，等比展示。
