点击放大预览富文本中的图片

背景

有时候我们通过富文本编辑器编辑保存的内容，需要通过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地址。

至此就完成了，是不是很简单。如果对您有帮助的话，请动动您发财的小手点赞、关注加收藏呗。