vue h5端实现富文本图片预览（基于 Vant 的 ImagePreview 组件）

h5 页⾯展⽰从后台接受的富⽂本信息（图⽚预览） vant

main.js引入

import{ImagePreview}from'vant';
Vue.use(ImagePreview);
Vue.prototype.$ImagePreview = ImagePreview

我在项目中使用的是函数调用方式，所以要定义一个实例

Vue.prototype.$ImagePreview = ImagePreview

或者你在用到的页面单独导入

import { ImagePreview } from 'vant';

否则死活报错：ImagePreview is not defined

报错原因

你在vue页面中直接调用ImagePreview，那么你vue页面中和全局都没有这个函数，可不就报错了吗。

ImagePreview是一个函数，他不是一个组件，所以不能用Vue.use(ImagePreview);的方式去挂载，你需要Vue.prototype.ImagePreview = ImagePreview，这样在组件中再以this.ImagePreview的方式调用，或者把ImagePreview挂载到window上。

html代码

<div v-html="htmlString"></div>

富文本数据

//模拟接口返回的数据
let htmlString = `
	<p class="p1">
		<img src="img/1.png">
        <span>我是帅哥</span>
		<img src="img/2.png">
	</p>`;

效果图

这里需要点击屏幕上的每张图片，点击后将只预览点击图片

 一、给div设置点击事件，传一个$event

<div v-html="htmlString" @click="imageChgange($event)"></div>

二、获取e.target.currentSrc路径

打印出e看一下是什么

我们就从e里面获取富文本中的路径也就是 e.target.currentSrc （获取当前点击后的图片路径）

methods：{    
 imageChgange(e) {
  console.log(e);
  console.log(e.target.currentSrc);
  if (e.target.nodeName == "IMG") {
   ImagePreview({
     images: [e.target.currentSrc], //e.target.currentSrc  当前图片src
     closeable: true,
     showIndex: false,
     loop: true,
     closeOnPopstate: true
    });
      } else {
        return;
      }
    },
}

最终效果图

到此结束