uniapp开发小程序使用vue的v-html解析富文本图片过大过宽显示超过屏幕解决办法

在uniapp开发小程序时，使用v-html解析富文本内容时，图片可能会因为尺寸过大或过宽导致超出屏幕显示范围。为了解决这个问题，可以在数据绑定中对图片的宽度进行控制。

以下是一个简单的例子，展示如何在uniapp中使用v-html并控制图片的大小：

<template>
  <view>
    <rich-text :nodes="articleContent"></rich-text>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      rawHtmlContent: '<div>这里是富文本内容，其中包含过大的图片...</div>'
    };
  },
  computed: {
    articleContent() {
      // 使用正则表达式匹配所有的img标签，并添加样式控制图片大小
      return this.rawHtmlContent.replace(/<img[^>]*>/gi, (match) => {
        return match.replace(/style="[^"]*"/gi, '').replace(/width="[^"]*"/gi, '').replace(/height="[^"]*"/gi, '') + ' style="max-width:100%;height:auto;"';
      });
    }
  }
};
</script>

在这个例子中，我们使用了一个计算属性articleContent来处理原始的HTML内容。通过正则表达式找到所有的<img>标签，并且替换掉原有的width、height和style属性，然后添加了一个新的样式style="max-width:100%;height:auto;"，这样图片就会自适应宽度，并且高度会自动调整保持图片比例。

请注意，这个例子只是一个简单的说明，实际使用时可能需要根据具体的富文本内容进行适当的调整。