Vue v-html中内容图片过大自适应处理

在Vue中，如果你需要处理v-html指令中的图片大小，可以通过计算样式来自适应容器大小。以下是一个简单的例子：

<template>
  <div v-html="content"></div>
</template>
 
<script>
export default {
  data() {
    return {
      content: '<img src="path_to_your_image.jpg" class="responsive-img" />'
    };
  },
  mounted() {
    this.$nextTick(() => {
      const images = this.$el.querySelectorAll('.responsive-img');
      images.forEach(img => {
        // 设置图片最大宽度为容器的100%，并且高度自动调整
        img.style.width = '100%';
        img.style.height = 'auto';
      });
    });
  }
};
</script>
 
<style>
.responsive-img {
  display: block; /* 使图片宽度变为100% */
  max-width: 100%; /* 限制图片最大宽度不超过其容器宽度 */
}
</style>

在这个例子中，.responsive-img 类被添加到了v-html内容中的图片元素上。在mounted钩子中，我们使用this.$nextTick确保DOM已经更新，然后查询所有带有.responsive-img类的图片，并设置它们的样式使其宽度最大为容器宽度，并且高度自动调整。这样图片就会根据容器大小自适应显示。