VUE点击富文本图片预览

基于微信开发的可以直接引用微信的sdk预览图片功能

npm install weixin-js-sdk <div class="rich" v-html="synopsis" @click="getpreview($event)"></div> <script> import wx from "weixin-js-sdk"; getpreview(e) { if (e.target.tagName == "IMG") { wx.previewImage({ current: e.target.src, urls: [e.target.src] }); } } </script>

引用第三方UI库实现图片预览，以Vant的ImagePreview为例

<script> import { ImagePreview } from "vant"; getpreview(e) { if (e.target.tagName == "IMG") { ImagePreview({ images: [e.target.src], closeOnPopstate: true //页面回退关闭预览 }); } } </script>

Js获取富文本所有图片src地址

getImgSrc(rich) { var imgList = []; htmlstr.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, (match, capture) => { imgList.push(capture); }); return imgList; }