HTML

<template>
    <div class="container">
        <!-- 渲染的内容 -->
        <div @click="clickImage" v-html="content"></div>
    
        <!-- 图片预览 -->
        <el-image ref="previewImageRef" style="display: none" :src="previewUrl" :preview-src-list="urls"></el-image>
    </div>
</template>

JS

<script>
export default {
  data() {
    return {
      content: '<p>v-html指令中的图片</p><p><img src="https://test-1256689020.cos.ap-nanjing.myqcloud.com/images/record.jpg" width="346"></p>',
      previewUrl: '',
      urls: []
    }
  },
  methods: {
    clickImage(e) {
      console.log(e.target, e.target.tagName.toUpperCase())
      if (e.target.tagName.toUpperCase() === 'IMG') {
        // 当前点击的img地址
        this.previewUrl = e.target.currentSrc
        // 定义一个数组用来接收img地址
        this.urls.push(e.target.currentSrc)
        // 触发图片预览点击事件
        this.$refs.previewImageRef.clickHandler()
      } else if (e.target.tagName.toUpperCase() === 'PRE') {
        console.log(1111111111)
      }
    }
  }
}
</script>

效果