vue + 图片加载 + 默认图片

最新推荐文章于 2024-04-15 14:56:17 发布

原创最新推荐文章于 2024-04-15 14:56:17 发布 · 2.9k 阅读

4 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种在图片数据未返回或加载失败时，采用默认图片展示的解决方案。通过Vue.js的v-show指令和img的load事件，确保了图片加载过程中的用户体验，避免了页面布局的突然变化。

需求：

图片数据未返回 + 图片数据返回为空 + 图片加载出错时，图片采用默认图片展示。

解决：
先判断返回数据是否有，再通过img 的 load事件判断是否加载完成。

现象：

图片会先加载默认图片，等到请求的图片加载完成替换默认图片。
注意：
代码中 1 至 2 处是必须使用 v-show，若使用 v-if ，其中一个图片无效时，DOM中img标签则会全部为默认图片的img标签。

<template>
<div v-for="(activeItem, activeIndex) in activityList" :key="activeIndex">
<div class="img-wrap">
        <!-- 1 -->
		<img 
			:src="imgUrl + activeItem.Banner + '_0x0'" 
			@load="activityLoad (activeItem.Banner, activeIndex)" 
			v-show="activeItem.Banner && loadingImges[activeIndex]"
		>
		<img 
			:src="loadingImgSrc"
			v-show="!activeItem.Banner || !loadingImges[activeIndex]"
		>
        <!-- 2 -->
</div>
</template>

<script>
const loadingimg = require('../assets/images/category/banner1.png')

export default {
    data () {
        return {
            activityList: [],
            loadingImges: {},
			loadingImgSrc: loadingimg,
        }
    },
    methoeds: {
        activityLoad (imgId, imgIndex) {
            if (imgId) {
				this.loadingImges[imgIndex] = true;
			}
        },
        getList () {
            //获取到图片数组id，拼接为src
        }
    }

}

</script>