首先要知道的是 uniapp 提供的图片预览 API 不支持 base64 格式的图片预览，所以要先将富文本里所有的图片找出来然后通过 HbuilderX 的插件市场下载 image-tools 来实现图片格式从 base64 转换成临时 url。完成后把临时 url 拼凑成临时数组就可以调用 uni.previewImage 来实现图片预览。

完整案例

previewImage() {
	// 富文本全部内容
	let richText = this.msgData.noticeContent 
	// 获取 img 标签数组
	let tagsImage = richText.match(/<img[^>]+>/g)
	let base64Arr = []
	for (let i = 0; i < tagsImage.length; i++) {
		tagsImage[i].replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function(match, capture) {
			base64Arr.push(capture)
		})
	}
	// 数组倒序 从第一张开始预览
	base64Arr = base64Arr.reverse()
	console.log(base64Arr)
	// 串行,base64转换成临时url
	base64Arr.reduce((promise, path) => promise.then(res => base64ToPath(path).then(base64 => (res.push(
			base64), res))), Promise.resolve([]))
		.then(res => {
			// 临时url
			// console.log(res)
			uni.previewImage({
				current: 0,
				urls: res
			});
		})
		.catch(error => {
			console.error(error)
		})
}

以下是详细步骤分解

uni.previewImage API 说明

uni.previewImage({
	current: index,     // 当前显示图片的索引值
	urls: res,    // 需要预览的图片列表，res要求必须是数组
	loop:true,          // 是否可循环预览
})

下面是后端接口传过来的富文本数据，可以看到图片是 base64 的格式

1.首先我们要做的是获取到富文本的全部内容，然后通过正则表达式提取出所有 <img> 标签及其属性。

// 富文本全部内容
let richText = this.msgData.noticeContent 
// 获取 img 标签数组
let tagsImage = richText.match(/<img[^>]+>/g)
console.log(tagsImage)

2.创建一个空数组存放 base64 图片的数组 （只需要src里面的内容，格式是data:image/png;base64,…）

let base64Arr = []
for (let i = 0; i < tagsImage.length; i++) {
	tagsImage[i].replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function(match, capture) {
		base64Arr.push(capture)
	})
}
// 数组倒序 从第一张开始预览
base64Arr = base64Arr.reverse()
console.log(base64Arr)

3.引入 image-tools 插件

https://ext.dcloud.net.cn/plugin?id=123

导入到项目后引入插件提供的 api

// 以下路径需根据项目实际情况填写
import {pathToBase64,base64ToPath} from '@/js_sdk/mmmm-image-tools/index.js'

4.案例是单张图片，为了防止有多张图片我们可以利用 promise 来串行和并行的执行多个任务，并且调用 uni.previewImage 就可以实现多张图片预览

具体详情可以看插件的使用说明。

// 串行,base64转换成临时url
base64Arr.reduce((promise, path) => promise.then(res => base64ToPath(path).then(base64 => (res.push(
		base64), res))), Promise.resolve([]))
	.then(res => {
		// 临时url
		// console.log(res)
		uni.previewImage({
			current: 0,
			urls: res
		});
	})
	.catch(error => {
		console.error(error)
	})