v-html 图片点击预览

  <div v-html="item.comment" ref="content" @click="imageChagange($event)">{{item.comment}}</div>
<el-image-viewer  v-if="showViewer" :on-close="closeViewer" :url-list="srcListView" />

import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

components: { ElImageViewer},

 data() {
 srcListView: null,
showViewer: false,
}

 //富文本渲染图片点击
    imageChagange(e) {
      if (e.target.nodeName === 'IMG' || e.target.nodeName == 'img') {
        //判断是否图片标签
        const img = e.target.currentSrc //获取点击图片地址
        this.onPreview([img])
      }
    },
    //开启图片预览
    onPreview(imgList) {
      this.srcListView = imgList
      this.showViewer = true
    },
    //关闭图片预览
    closeViewer() {
      this.showViewer = false
    },

若需要可切换下一张

<div v-html="item.comment" :id="'htmlContent'+index" :ref="'htmlContent'+index" @click="imageChagange($event,index)">{{item.comment}}</div>
<el-image-viewer v-if="showViewer" :initial-index="viewerIndex" :on-close="closeViewer" :url-list="srcListView" />
 

// 重点是:initial-index="viewerIndex"

data(){
 viewerIndex: 0
}

//富文本渲染图片点击
 imageChagange(e, idx) {
      console.log('e', e)
      let currentImg = e.target.currentSrc
      console.log('currentImg', currentImg)
      // 得到当前评论的所有的img节点
      const imgs = document.getElementById('htmlContent' + idx).querySelectorAll('img')
      this.srcListView = []
      imgs.forEach((img, index) => {
        this.srcListView.push(img.src)
       //拿到当前图片的索引！！！
        if (currentImg == img.src) {
          this.viewerIndex = index
        }
      })
      this.showViewer = true

      // 单张预览
      // if (e.target.nodeName === 'IMG' || e.target.nodeName == 'img') {
      //   //判断是否图片标签
      //   const img = e.target.currentSrc //获取点击图片地址
      //   this.onPreview([img])
      // }
    },