uniapp: rich text image click to preview

1. Dom structure

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

2. Click event

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

3. Get the rich text field data as follows

​
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

Guess you like

Origin blog.csdn.net/Ygaidi/article/details/128373025