uniapp踩坑之: rich-text组件富文本内容中图片加载失败

今天小编在开发中又碰到了关于uniapp的一个新问题，在后端返回的富文本内容当中存在有img标签需要我们页面上去展示，但在把富文本内容放到rich-text(或者是v-html)当中之后发现里面的文字内容是可以正常显示的，而图片则是无法加载

可以看的出来在小程序中已经报错，提示我们图片加载失败了，一开始我以为是服务器返回的地址路径错了导致加载不出来，但是把返回的url放到浏览器中去请求是能拿到的，说明不是路径问题，但是，当我在浏览器中去打开这张图片的时候却发现了这样的现象：

这时脑子一抽(灵光一闪)，是不是因为是图片太大了或者是网速太慢导致的呢，一查看图片发现是几百k大小的，有可能是网速太慢导致的，那么这种情况我们前端要如何去优化呢？

这个时候我又想到了可以通过请求重试，在请求失败的时候重复去请求，增加成功几率，但是后端返回的是富文本内容字符串，如何去做请求重试呢？

我们可以手动去创建一个img标签元素，动态设置其的src来触发重新请求，那么新的问题又来了：

• 什么时候重新请求
• 请求的路径怎么获取

第一个问题很简单，自然是在失败的时候重新设置，可以通过img标签的error事件去监听，当失败的时候重新请求

第二个问题关键在于我们拿到的是字符串，如何在字符串中把想要的url提取出来，我们马上就会想到用正则去匹配，于是便有了下面的代码：

const srcRegex = /src="([^"]*)"/g;
const match = srcRegex.exec(newContent);
this.imgSrc = match ? match[1] : null;
console.log(this.imgSrc, '处理后的src路径');

这样就能成功获取图片的url地址了，剩下的就是处理在失败时重新请求：

// 处理图片请求失败
		    
handleImgErr() {
	if (this.errCount < this.maxErrCount) {
		const temp = this.imgSrc
		this.errCount++
		this.imgSrc = ''
		this.$nextTick(() => {
			this.imgSrc = temp
		})
	}
},

这里维护两个状态：errCount表示失败次数，maxErrCount表示最大重试次数，然后在失败时利用vue的响应式帮助我们动态设置img的src路径达到重新请求的目的。

最终通过有限次数的重试当中也是能成功的获取到想要的图片了

~~EOF~~