vue强制全局替换img错误图

第一种:

比较简单,但是对于你引用别人的显示图片组件那就不一定有onerror事件,只能处理自己写的元素img标签

附代码:

<template> 
    <img :src="record.ImagePath" class="myImage" :οnerrοr="defaultImg" />

</template>
<script>
 export default {
        data() {
            return {                
                defaultImg: 'this.src="' + require('@/images/LOGO.png') + '"',         
            }
        }
}
</script>

第二种:

处理页面显示的一切img错误

function dealImg() {
	let imgObj = document.getElementsByTagName("img");
	for (let i = 0; i < imgObj.length; i++) {
		imgObj[i].onerror = (e) => {
			e.srcElement.src = require('@/static/logo.png');//写你自己的图片地址
			//imgObj[i].previousSibling.style.backgroundImage = 'url(' +     require('@/static/logo.png') + ')';
            //这一句是对某些特殊的图片组件做处理,自己可以去检查页面报错的图具体元素位置
		}
	}
}

如果想看效果,直接把代码内容写到mounted里

我是讲这个挂载到全局,每次进页面都调用一下,轻轻松松解决

mounted(e) {
	this.$global.dealImg();	
},	
发布了25 篇原创文章 · 获赞 10 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/xj932956499/article/details/103200827