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

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


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

res.content = res.content.replace(/

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

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

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

你可能感兴趣的:(Vue中使用v-html内容图片过大的解决方法)