Vue3中实现改变富文本中图片标签的样式以及点击图片放大功能

• 富文本（例子）

vHtml.value = '<p><img src="https://static.yzou.cn//ue/D1B42C986C644AD9ACFD083BFFFCD093.png" title="" alt=""/></p>'

• 富文本展示

<div class="mask-v-html" v-html="vHtml" @click="imageEnlargement"></div>

• 修改图片标签样式

const getImg = () => {
  //此处用正则亦可 
  vHtml.value = vHtml.value.replaceAll('<img', '<img style="width:100%;vertical-align: top;margin:0px auto;"')
}

• 实现点击图片放大

import { ImagePreview } from 'vant'

const imageEnlargement = (e: any) => {
  if (e.target.nodeName === 'IMG') {
    ImagePreview({
      images: [e.target.src], // 传递的是图片集数组
      startPosition: 0, // 图片索引位置
      closeable: true, // 是否显示关了按钮
      showIndicators: true, // 是否显示轮播指示器
      loop: false // 不设置为false,首图和尾部图不能正常加载
    })
  }
}