VUE 设置加载默认图片

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

方法一：

<div class="img">
  <img :src="item.head_portrait" :onerror="errorimg" alt />
</div>

export default {
  data() {
    return { errorimg:'this.src="'+require('../../assets/images/logo.png')+'"'
    }

方法二：
解决：
先判断返回数据是否有，再通过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>

希望帮到你，有任何问题可以评论区交流

方法二原文链接参考：http:///blog.csdn.net/github_39598787/article/details/88398199