uniapp:富文本图片点击预览

最新推荐文章于 2024-06-19 14:31:33 发布

_木棠

最新推荐文章于 2024-06-19 14:31:33 发布

阅读量1k

点赞数 3

文章标签： uni-app javascript 前端

本文链接：https://blog.csdn.net/Ygaidi/article/details/128373025

版权

富文本 img标签 previewImage 音频解析数据处理

关键词由CSDN通过智能技术生成

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