富文本使用v-html渲染图片过大，溢出的解决方案

为了处理使用v-html渲染时图片过大导致的溢出问题，可以在数据绑定时对图片元素进行处理，设置合适的宽高或最大宽高限制。

以下是一个简单的Vue组件示例，演示如何在v-html中渲染图片并限制其大小：

<template>
  <div v-html="safeHtml"></div>
</template>
 
<script>
export default {
  props: {
    htmlContent: String
  },
  computed: {
    safeHtml() {
      // 使用DOMParse和DOMSerializer来处理HTML字符串
      const parser = new DOMParser();
      const doc = parser.parseFromString(this.htmlContent, 'text/html');
      const images = doc.querySelectorAll('img');
 
      images.forEach(img => {
        // 设置图片最大宽度并保持宽高比
        img.style.maxWidth = '100%';
        img.style.height = 'auto';
      });
 
      const serializer = new XMLSerializer();
      return serializer.serializeToString(doc.documentElement);
    }
  }
}
</script>

在这个示例中，我们创建了一个计算属性safeHtml，它会处理传入的HTML内容。通过DOMParser解析HTML字符串，然后查询所有的<img>标签，并对它们设置最大宽度为100%，以及高度自动调整。最后，使用XMLSerializer将修改后的文档序列化回字符串，以供v-html指令使用。这样可以有效地控制图片在渲染时不会超出其容器范围。