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加载图片问题

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容