龍巖易富通網(wǎng)絡(luò)科技有限公司

龍巖小程序開(kāi)發(fā),龍巖分銷系統(tǒng)

uniapp富文本圖片預(yù)覽

2023.11.08 | 708閱讀 | 0條評(píng)論 | 小程序

<rich-text :data-nodes="about" :nodes="about" @click.stop="showPreview" style="line-height: 60rpx;"></rich-text>


showPreview(e) {

let conimg = e.target.dataset.nodes;

let imgs = conimg.match(/<img[^>]+>/g); //選擇節(jié)點(diǎn)中的img

let imgList = [];

//遍歷img標(biāo)簽的src里面的內(nèi)容放在定義的數(shù)組imgList中

for (var j = 0; j < imgs.length; j++) {

imgs[j].replace(/<img[^>]*src=['"]([^'"]+)[^>]*>/gi, function(match, capture) {

imgList.push(capture)

})

}

//最后一步就是所有圖片放在預(yù)覽的方法previewImage中就可以了

uni.previewImage({

current: imgList,

urls: imgList,

})

},


贊 (

發(fā)表評(píng)論