关于渲染图片后发生加载失败如何解决

 在项目中图片渲染过后可能是因为路径不对，首先：

第一种情况就是需要去查看接口返回的数据路径，是否正确。如果不正确就需要先尝试替换路径。替换路径呢可以使用replace这个方法。

这个getAvatar这个函数我写在了动态src中，然后里面传递了一个参数，传了当前这条数据的，然后在这个函数内可以获取到当前这个图片avatar。

接着再进行判断接口数据中的路径里是否含有错误的路径，当这个判断成立时就使用replace这个方法，替换成正确的路径。当然如果接口数据里多了一个路径的话，那么使用replace第二个参数就可以为空，这样可以直接删掉错误的路径。

// 判断下标并替换图片
const getAvatar = (row, index: number) => {
	// 获取当前图片
	let imageUrl = row.avatar;
	// 将数据中路径里包含cywl路径的
	if (imageUrl && imageUrl.includes('https://cywl.coldmoon.work')) {
		// 替换成lhsc新的路径
		imageUrl = imageUrl.replace('https://cywl.coldmoon.work', 'http://lhsc.xingyuncm.cnhttps');
	}
};

<img
	:src="getAvatar(row, $index)"
	@error="(e) => {e.target.src = defaultImage;}
	"style="width: 30px; border-radius: 100%; height: 30px"alt="avatar"
/>

第二种情况可能是图片路径正确，但是图片无法显示，这种情况下可以使用error图片报错处理事件。如上述代码来看，我是直接写在了行内，defaultImage这个变量，是我在页面上直接导入了一张图片路径。

以上两种是我在项目中遇到的图片报错问题的一个解决办法，总结一下好复盘。