移动端开发中，经常遇到渲染富文本的需求！但是也会有很多问题，今天遇到v-html渲染富文本时图片会溢出，找了很多方法没有用！然后自己试了好几种方法！

正常显示的图片

有问题的图片

HTML

    <div class="product-content">
          <div
            class="product-img"
            v-html="getGoodsDetailH5.goods_content">
          </div>
   </div>

CSS

      .product-content {
        width: 375px;
        margin-bottom: 50px;
        .product-img {
          p img {           //------------解决  在v-heml="xxxx.xxx"外面添加个div  设置大小
            width: 100% !important;  //--------------------设置大小  添加!important
            height: auto !important;
          }

          //  ::v-deep p img {    ------------------------------不生效
          //     width: 100% !important;
          //     height: auto !important;
          //   }

          // ::v-deep {------------------------------不生效
          //   p {
          //     img {
          //       max-width: 100% !important;
          //       width: 100%;
          //     }
          //   }
          // }
        }
      }

JS的方法 在我的项目中无效，可借鉴试试看

      // 将你要渲染的数据进行字符串正则匹配
      this.getGoodsDetailH5.goods_content =
        res.data.data.getGoodsDetailH5.goods_content.replace(
          /<img/g,
          "<img style='max-width:100%;height:auto;'"
        );