mp-vue 或vue或uni-app里面使用v-html展示图片或者播放视频

项目场景：

mp-vue 或vue或uni-app里面使用v-html展示图片或者播放视频

问题描述

因为mp-vue不支持播放视频，且v-html一般展示的是富文本，在上传图片或者音视频的时候不会给全路径，所以不能展示

<view v-html="item.bookdoc"></view>

解决方案：

// 解决富文本图片展示不了，使用正则匹配对应的img,然后修改src路径
bookdoc = bookdoc.replace(
			/<img\s+(?:src|data-mce-src)="([^"]+)"/g,
			(match: any, p1: string) => {
				return '<img style="width:100%;height:auto" src="' + 自己的真实路径 + '/' + p1 + '"';
			}
		);

// 解决富文本视频展示问题
// 我是单独弄个video，然后使用正则给富文本里面的视频src提取出来
<video  :src="videosrc" @play.stop="onVideoPlay"
	controls="controls" width="100%" height="auto"></video>
	// src 提取
const regex = /<video\b[^>]*?\bsrc\s*=\s*(['"])(.*?)\1[^>]*?>/i;
let match = v.optionTitle.match(regex);
if (match) {
	videosrc = 'xxx自己的真实路径前缀' + '/' + match[2];
} else {
	v.showvideo = true;
}