当前位置：首页 > article >正文

Vue前端开发-Vant之Image组件

article 2025/2/22 12:45:25

应用的开发离不开图片的展示，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>