使用rich-text渲染富文本,实现里面内容图片预览功能
//template里面的代码
<rich-text space='emsp' @click="点击事件" :data-nodes="数据" :nodes="数据" ></rich-text>
js里面的代码
// 富文本预览图片
showImg(e){
let contentimg=e.target.dataset.nodes;
let imgs=contentimg.match(/<img[^>]+>/g);//把img所有节点的图片选择出来
let arrImg=[];
//遍历标签拼拿到你的图片的src里面的内容放在我们数组中
for(var j=0;j<imgs.length;j++){
imgs[j].replace(/<img[^>]*src=['"]([^'"]+)[^>]*>/gi,function(match,capture){
arrImg.push(capture)
})
}
//最后一步就是把我们的所有图片放在预览的api中就可以了
uni.previewImage({
current:arrImg,
urls:arrImg,
})
},
总结(问题)
- 因为我们点击事件(一直指向的都是富文本的元素,点不到具体的元素,所以,要是有多张图片的话,会出现预览图片永远都是从第一张开始的,而指不到具体的图片,所以目前还有很好的办法,有知道的同学可以下方留言,一起交流一下哦)