外贸网站建设制作公司教你如何建立网站

我使用的是uniapp 官方推荐的组件 rich-text，一般我能用官方级用官方，更有保障一些。

一、整体逻辑

1. 定义一段html标签字符串，里面包含图片

2. 将字符串放入rich-text组件中，绑定点击事件@itemclick

3. 通过点击事件获取到图片url路径，使用uni 提供的预览图片 和 保存图片API
 

注意：这是在vue文件下，在nvue无效，避免在nvue实现该功能。

<template><rich-text :nodes="strHtml" @itemclick="handleRich"></rich-text>
</template><script setup>//定义测试的html字符串let strHtml = `<div><p>一般完成Java的基础语法和JavaSe部分已经Spring boot框架后，就可以开始工作，在工作中不断实践拓展提高自己的技术能力</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>`;//处理点击事件const handleRich = (e)=>{// console.log(e.detail.node.attrs.src,e);let imgPath = e.detail.node.attrs.src;handlePreViewImage(imgPath);}//预览和长按保存图片const handlePreViewImage = (imgPath)=>{let arr = [];arr.push(imgPath);uni.previewImage({urls: arr,longPressActions: {itemList: ['保存图片到相册'],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>