vue强制全局替换img错误图

第一种：

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

附代码：

<template> 
    <img :src="record.ImagePath" class="myImage" :onerror="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();	
},