Vue中使用v-html内容图片过大的解决方法

项目中遇到一个问题，使用 Vue 的 v-html 加载数据后，内容里边的后台传回图片太大，显示不全。
可以有以下解决方案

<style scoped>
  .content >>> .img {
    max-width: 100%;
    height: auto;
  }
</style>

但是在项目中，我并没有用 scoped 这个属性，加上后，会导致页面错乱严重，所以用了以下方法

res.content = res.content.replace(/<img/g,"<img style='max-width:100%;height:auto;'");

但是发现不起作用，查看返回数据发现后台返回没有 style 标签，只返回了宽高，所以改用以下方法

replacrImg(detailText) {
                detailText = detailText.replace(/<img[^>]*>/gi, function(match, capture) {
                    return match.replace(/(style="(.*?)")|(width="(.*?)")|(height="(.*?)")/ig,
                        'style="max-width:100%;height:auto;"') // 替换style
                });
                return detailText;
            },

以上可以解决v-html加载图片问题