uniapp:富文本图片点击预览

1.Dom结构

<rich-text class="" :nodes="audio.voiceContent" @itemclick="perview"></rich-text>

2.点击事件

perview(){
	console.log(this.arrImgList)
	uni.previewImage({
		current:this.arrImgList.length,
		urls:this.arrImgList,
	})
},

3.得到富文本字段数据如下处理

​
this.content = res.data.voiceContent.match(/<img[^>]+>/g);
	
var arrImg = []
for(var j=0;j<this.content.length;j++){
	this.content[j].replace(/<img[^>]*src=['"]([^'"]+)[^>]*>/gi,function(match,capture){
		console.log(match,capture)		
		arrImg.push(capture)
		console.log(arrImg)
	})
}
this.arrImgList = arrImg
uni.previewImage({
	current:arrImg,
	urls:arrImg,
})

​this.audio = res.data