vue实现v-html渲染的图片预览

在v-html属性标签的标签上添加 getImg 方法

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

getImg方法,通过 $event 可获取用户当前点击的元素相应的内容,这里可以获取所点击图片对应的src。判断拿到src后,添加图片的预览效果就可以了

// 点击查看图片
  const imgPreviewValue = ref('');
  const getImg = (event: any) => {
    if (event.target.currentSrc) {
      imgPreviewValue.value = event.target.currentSrc;
    }
  };

 

posted @ 2024-02-03 16:23  蓦然JL  阅读(89)  评论(0编辑  收藏  举报
访问主页
关注我
关注微博
私信我
返回顶部