这是一个模板字符串的标签里面有很多张图片,我们想通过字符串渲染并且预览图片
var htmlString = ` <p class="p1"> <img src="https://i8.mifile.cn/v1/a1/9c3e29dc-151f-75cb-b0a5-c423a5d13926.webp"> <img src="https://i8.mifile.cn/v1/a1/f442b971-379f-5030-68aa-3b0accb8c2b9.webp"> <img src="https://i8.mifile.cn/v1/a1/63b700b6-643e-ec18-fdf3-da66b4b4173f.webp"> <img src="https://i8.mifile.cn/v1/a1/e9dbf276-193e-11c4-99a6-3097fde82350.webp"> <img src="https://i8.mifile.cn/v1/a1/1249d3ee-2990-a2b4-28d9-f719c2417b1f.webp"> <img src="https://i8.mifile.cn/v1/a1/97c79915-64b2-808c-53b4-4345652a179f.webp"> <img src="https://i8.mifile.cn/v1/a1/cd0fbe1e-a1b3-a87a-f4a6-6fb08ec54931.webp"> </p>`;
通过v-html渲染标签元素
<div v-html="img" @click="imageChgange($event)"></div> img: "",
mouted中绑定这个变量
this.img = htmlString;
效果:
重点来了!!
这里需要点击屏幕上的每张图片,点击后将只预览本图片,而且能对应上这个富文本的图片预览
一、给div设置点击事件,传一个$event
二、获取e.target.currentSrc路径
打印出e看一下是什么东西
我们就从e里面获取富文本中的路径也就是 e.target.currentSrc (获取当前点击后的图片路径)
console.log(e.target.currentSrc);
打印看是否能找到正确的路径
找到之后就好办了,接着往下看。
三、通过vant使用图片预览功能
vant中组件调用使用方法如下:
需要引入一下vant中的图片预览插件
import { ImagePreview } from "vant";
if (e.target.nodeName == "IMG") { //判断他的类型是不是img ImagePreview({ images: [e.target.currentSrc], //e.target.currentSrc 当前图片src showIndex: false, loop: false, }); } else { return; }
整段代码如下:
imageChgange(e) { console.log(e); console.log(e.target.currentSrc); if (e.target.nodeName == "IMG") { ImagePreview({ images: [e.target.currentSrc], //e.target.currentSrc 当前图片src showIndex: false, loop: false, }); } else { return; } },
实现效果如下: