v-html中图片路径错误显示默认图

版权声明： https://blog.csdn.net/caoyan0829/article/details/82182442

这是后台返回的富文本，其中包含了< img/>标签，如果img标签的src路径不对，就不让他显示出来

上代码：

<div class="info-content info-page" v-html="infoData.content"></div>

let imgs = document.querySelectorAll('img')
for(let i = 0 ; i < imgs.length ; i++ ){
						
	if(imgs[i].className == ''){
							
		imgs[i].onerror = () =>{
			console.log('img')
			imgs[i].className = "error-img";
		}
							
	} 
}

	.info-content
		margin: 15px 0
		font-size: 15px
		color: #333333
		line-height 20px
		/deep/ .error-img
			display:none
		/deep/ img
			max-width:100%
			object-fit: cover
			padding: 10px 0

思路：
1.先获取整个页面的img标签，

2.因为解析富文本的img标签是没有 class 名字的，所以去判断有没有 className，

3.如果执行 img 的 onerror事件，说明此 img 标签的路径不正确，那么就给这个 img 标签加上 className 为 .error-img 

4.因为此img标签是 v-html 解析出来的，所以要用  >>> 或者  /deep/  来标识

最后分享一个公众号二维码，写一些散文和影评等，欢迎关注。