背景
有时候我们通过富文本编辑器编辑保存的内容，需要通过v-html渲染到一个页面上。但是对于文章中的图片无法点击放大预览。本次实现的点击放大预览的效果如下：
解决方案：
一、在methods中定义handleClickImage方法
import { ImagePreview } from 'vant'
/* 点击查看图片 */
handleClickImage (imagesUrl) {
const images = [imagesUrl]
ImagePreview({
images
})
}
我这里用的vant框架中的一个ImagePreview组件来快速实现预览效果，通过函数式调用来实现预览效果。
当然除此之外，你也可以自定义一个弹窗式图片预览组件，通过传递图片的url，达到预览效果。
二、添加点击事件获取图片的url
<div class="content-container">
<div class="main-content" v-html="detail.content" @click="handleClickImage($event.target.src)"></div>
</div>
添加click点击事件，调用methods中的handleClickImage方法，并传入参数值$event.target.src，如果点击图片，那么$event.target.src的值是图片的url地址。
至此就完成了，是不是很简单。如果对您有帮助的话，请动动您发财的小手点赞、关注加收藏呗。
扫一扫
398
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
