我使用的是uniapp 官方推薦的組件 rich-text，一般我能用官方級(jí)用官方，更有保障一些。

一、整體邏輯

1. 定義一段html標(biāo)簽字符串，里面包含圖片

2. 將字符串放入rich-text組件中，綁定點(diǎn)擊事件@itemclick

3. 通過點(diǎn)擊事件獲取到圖片url路徑，使用uni 提供的預(yù)覽圖片 和 保存圖片API
?

注意：這是在vue文件下，在nvue無效，避免在nvue實(shí)現(xiàn)該功能。

<template><rich-text :nodes="strHtml" @itemclick="handleRich"></rich-text>
</template><script setup>//定義測(cè)試的html字符串let strHtml = `<div><p>一般完成Java的基礎(chǔ)語(yǔ)法和JavaSe部分已經(jīng)Spring boot框架后，就可以開始工作，在工作中不斷實(shí)踐拓展提高自己的技術(shù)能力</p><img  src="https://img0.baidu.com/it/u=265713382,944125301&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889" width="300" height="300" /></div>`;//處理點(diǎn)擊事件const handleRich = (e)=>{// console.log(e.detail.node.attrs.src,e);let imgPath = e.detail.node.attrs.src;handlePreViewImage(imgPath);}//預(yù)覽和長(zhǎng)按保存圖片const handlePreViewImage = (imgPath)=>{let arr = [];arr.push(imgPath);uni.previewImage({urls: arr,longPressActions: {itemList: ['保存圖片到相冊(cè)'],success: function(data) {console.log(data.tapIndex);if(data.tapIndex == 0){uni.saveImageToPhotosAlbum({filePath: imgPath,success: function () {uni.showToast({title: '保存成功',duration: 2000});}});}},fail: function(err) {console.log(err.errMsg);}}});}</script><style scoped lang="scss">
</style>

?