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  当前图片srccloseable: true,showIndex: false,loop: true,closeOnPopstate: true});} else {return;}},
}

最终效果图

到此结束

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

vue h5 端实现富文本图片预览（基于 Vant UI 的 ImagePreview 组件）
文章目录 vue h5 端实现富文本图片预览(基于 Vant UI 的 ImagePreview 组件) 预览效果关键代码使用案例 vue h5 端实现富文本图片预览(基于 Vant UI 的 I ...
H5 移动端保存图片到本地 + 图片预览
图片下载: 动态创建A链接,添加download属性和href属性,并触发点击事件 let alink = document.createElement('a'); alink.href = Url; ...
小程序自定义上传富文本并预览
上传时的效果预览时的效果代码如下(可直接全部复制查看,注意:下面上传的接口需要改成你们自己的服务器上传接口) <view class="col"><text& ...
Vue Element UI 之富文本图片上传服务器 + 图片地址插入富文本
该案例的情况 vue版本:vue cli3 插件:vue-quill-editor vue-quill-editor的增强模块:quill-image-extend-module quill-imag ...
Vue中实现文件流格式图片预览
需求:后端接口返回文档流格式图片,如何在页面中显示显示并预览? 思路: 设置 axios responseType: 'blob':传送门:JavaScript Blob 对象详解 URL.creat ...
前端学习（2698）：重读vue电商网站19之处理图片预览操作
图片预览窗可以用 el-dialog 组件来做,然后通过 on-preview 函数来处理图片预览的操作. Js  <el-dialog title=&qu ...
Vue+wangeditor富文本+element——--上传+下载文件+图片预览
一:上传文件 HTML <el-upload class="upload-demo" action="haircut/upload" :on-previe ...
uniapp 对富文本中的图片预览及长按图片识别二维码/保存图片
uniapp 对富文本中的图片预览及长按图片识别二维码/保存图片富文本一定要使用uniapp提供的<rich-text>标签,不要使用 v-html 因为<rich-text> ...
Vue中使用vue-quil-editor富文本编辑器+el-upload实现带图片上传到SpringBoot后台接口
场景系统中经常会用到富文本编辑器,比如新增通知和公告功能,并且需要添加上传图片. vue-quill-editor官网: https://www.npmjs.com/package/vue-quil ...