vue/vant获取富文本中的图片预览

这是一个模板字符串的标签里面有很多张图片，我们想通过字符串渲染并且预览图片

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;
      }
    },

 实现效果如下：