场景及问题描述：最近在做商品发布功能，类似淘宝的详情页，采用的是vue-quill-editor组件。
在测试发布带有多张图的商品的过程中，展示详情页的时候，多张图片上下存在间隙的问题。

具体问题如下：

• vue-quill-editor富文本组件展示的图片内容如下，看似没有问题

  
  
  image.png

• 展示到网页上显示的时候，发现详情页的多张图片上下存在间隙

  
  
  image.png

问题定位

• 查看生成的代码，代码如下：

 <p><img src="http://feiyangimage.oss-cn-shanghai.aliyuncs.com/activity/1613985506789437.jpg"></p>
 <p><img src="http://feiyangimage.oss-cn-shanghai.aliyuncs.com/activity/1613985520940370.jpg"></p>

原因：

用户上传1张图片A之后，习惯性的点击回车使光标换行，然后接着又上传了1张图片B。vue-quill-editor在监听到换行后，这两张图片就会分别用<p></p>包裹。查看源代码发现p标签有1个上下为16px的间距。因此p标签和p标签会存在间隙。

image.png

解决

• 将多张图片放到一个p标签。
  发布商品时，对富文本内容预先做如下处理

var dealContents = this.formData.content;
dealContents = dealContents.replace(/(<\/p><p>)/g, ""); // 去掉</p><p>标签

即，富文本的代码处理成如下即可解决问题。

<p>
  <img src="http://feiyangimage.oss-cn-shanghai.aliyuncs.com/activity/1613985506789437.jpg">
  <img src="http://feiyangimage.oss-cn-shanghai.aliyuncs.com/activity/1613985520940370.jpg">
</p>

最终效果如下

image.png