Vue —— 关于富文本渲染内容图片溢出的问题

Vue —— 关于富文本渲染内容图片溢出的问题

一、描述问题场景

前提：最近做的一个项目，包含了PC端和手机端，共用同一组数据库的数据。导致了，有些富文本内容在PC端录入的图片，在PC端显示正常，而在移动端的显示的图片则会溢出屏幕。

PC端：

移动端：

二、解决方法

1. 使用深度选择器

/deep/ .content img {
	width: 100% !important;
}

/* 或者 */

.content >>> img {
	width: 100% !important;
}

2. 使用正则匹配

// 将你要渲染的数据进行字符串正则匹配
this.goods_info.content = res.data.data.goods_info.content.replace(//g,");

然后再渲染出来，就可以正常了：

<div v-html="goods_info.content">div>