背景：对于v-html渲染的内容，无法直接对其中的图片进行操作，但某些情况下又需要对图片进行放大预览。
解决办法：在渲染内容的父元素上加上click（getImg）方法，点击图片时可获取到图片的路径；再通过预览插件进行预览；
1.获取图片路径：
HTML部分：
<div @click="getImg($event)"> //在父元素上加上click方法<div v-html="currentItem.content"></div> //用v-html渲染内容 </div>
JS部分：
//此处用的vue3<script setup>const getImg = ($event) => {console.log($event.target.currentSrc) //当前点击的图片的路径 }</script>
2.图片预览，此处用的是vue中的el-image-viewer组件：
HTML部分：
//hide-on-click-modal 禁止点击空白区域来关闭弹窗//@close="()=>{showViewer = false}" 预览弹窗关闭时的回调事件//:url-list="previewList" 预览图片的路径，previewList为数组<div class="demo-image__preview"><el-image-viewer hide-on-click-modal @close="()=>{showViewer = false}" v-if="showViewer" :url-list="previewList" /></div>
JS部分：
<script setup>import {ref} from 'vue'const showViewer = ref(false);const previewList = ref([]);const getImg = ($event) => {previewList.value = [$event.target.currentSrc];showViewer.value = true;}</script>
3.完整代码：
<template><div class="container"><div class="demo-image__preview"><el-image-viewer hide-on-click-modal @close="()=>{showViewer = false}" v-if="showViewer" :url-list="previewList" /></div><div @click="getImg($event)"> <div class="detailContent" v-html="currentItem.content"></div> </div> </div></template><script setup>import {ref} from 'vue'const showViewer = ref(false);const previewList = ref([]);const getImg = ($event) => {previewList.value = [$event.target.currentSrc];showViewer.value = true;}</script>
