vue页面中用v-html渲染出的图片如何实现图片预览

vue页面中用v-html渲染出的图片如何实现图片预览

最近项目提出了个新需求,公告详情里的图片要实现图片预览的功能
整个公告详情的内容是后台通过富文本编辑器上传的,我前台根据id拿到对应的公告详情,通过v-html渲染到页面上
之前实现的图片预览我是通过vant的图片预览组件(ImagePreview)实现的,接口拿到图片列表,直接应用就好了

<div class="img_wrapper" v-for="(item,index) in collInfo.imgUrls" :key="index">
  <img :src="item" alt="" @click="getImg(index)">
</div>

getImg(index){
 ImagePreview({
      images:this.collInfo.imgUrls,
      showIndex:true,
      loop:true,
      startPosition:index,
      closeable: true
  })
},

v-html渲染的图片进行预览要怎么办呢,百度一下呗
在v-html属性标签的父标签上添加getImg方法

<div class="page_scroll_content" @click="getImg($event)">
	<div class="content-box" v-html="newsHtml"></div>
</div>

getImg方法,通过$event可获取用户当前点击的元素相应的内容,这里我获取的所点击图片对应的src,再使ImagePreview方法就好

getImg($event){
  // console.log($event)
  // console.log($event.target.currentSrc)
  ImagePreview({
    images:[
      $event.target.currentSrc
    ],
    showIndex:false
  })
},

这里实现的是只能拿到所点击的那一张图片的src,想要实现所有该公告所有图片的src展示轮播效果还未找到合适的方案,如果找到了,会不定时进行更新的

参考资料:
https://segmentfault.com/q/1010000016466478?utm_source=tag-newest
https://blog.csdn.net/qq_37672347/article/details/103363915