解决Vue中用v-html显示富文本图片过大问题 – 我的笔记本

解决Vue中用v-html显示富文本图片过大问题

由于Vue中v-html是以原样展示的,并不会应用额外的样式,所以只能优化富文本字符串,将<img左标签替换为<img style="width:100%;height:auto"

const rickTextStr = "<p>\n  <img class=\"wscnph\" src=\"https://deepimage.polo-e.net/20221111/1668149211711.jpg\" />\n  <img class=\"wscnph\" src=\"https://deepimage.polo-e.net/20221111/1668149217153.jpg\" /></p>"
const rickTextStrReplace = rickTextStr.replace(/\<img/gi, '<img style="width:100%;height:auto" '); // 注意:auto" 后面有一个空格

经过这样的处理,富文本图片就不会过大,而是能正常显示了。

Related Posts

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注