需求:
图片数据未返回 + 图片数据返回为空 + 图片加载出错 时,图片采用默认图片展示
方法一:
<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
网友评论