微信小程序rich-text解析出来的图片排列有白线

最近在做微信小程序开发，遇见商品详情页后台返回来的数据有img，用标签解析后发现呈现出来的图有一道白色的边，

解决办法：

<rich-text nodes="{{introduction}}" bindtap="tap" class="pro_detailImg"></rich-text>

/* 商品详情图样式 */
.pro_detailImg{
  width:100%;
  font-size: 0; //父元素加上font-size:0;
}
.pro_detailImg  img{
  width:100%;
  height:auto;
  display:block; //将图片设置成块元素
}

如果后台返回来的数据还需要整理才能展示也可以参考如下的解析代码：

  // 处理后台返回的HTML格式文件-用js先去除HTML格式的样式，再自定义
        var str = res.data.introduction != null ? res.data.introduction : '';
        if (str != null || str != '') {
          var html = str.replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p')
            .replace(/<p>/ig, '<p style="font-size: 12Px; line-height: 22Px;">')
            .replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1')
            .replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1')
            .replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1')
            .replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/ig, '<img$1')
            .replace(/<img([\s\w"-=\/\.:;]+)/ig, '<img$1 style="width: 100%;height:auto;display:block"');
        }

然后效果就出来了

如有疑问建议或意见欢迎大家来一起聊聊哇~~~~微信扣扣：1319672314