uni-app rich-text内容小程序正常显示，但是Android上无法正常显示

使用uni-app框架，页面中rich-text内容，小程序打包后正常显示，但是Android，安卓机上打包，安卓模拟器上无法正常显示

问题描述:

在学习了第一个uni-app项目后，使用了HbuiderX将程序打包，在微信开发者工具上正常显示，使用真机调试页面内容也正常显示，但是打包成apk安装在手机后，发现通过后台接口传来的rich-text内容却无法显示，apk在手机上也没有异常提示，HbuilderX和微信开发者工具在出错的页面也没有错误提示，非常郁闷。

微信开发工具页面正常效果和模拟器效果(在本次问题中模拟器效果与真机一致，这里就不再截了)对比截图:

可以很清楚的看到，左侧微信开发者工具效果中，除了顶部的轮播图和底部固定的操作区外，中间还有商品描述的内容，这一部分就是通过后端接口传来的html字符串，我在uni-app中使用富文本rich-text的node属性渲染的。但右侧使用安卓模拟器的渲染效果缺乏了中间的内容。

渲染元素和数据来源处理的代码如下:

      <rich-text :nodes="goodsDetail.goods_introduce"></rich-text>
      async getGoodDetail(goods_id){
        // console.log(goods_id);
        const { data:res } = await uni.$http.get('/api/public/v1/goods/detail',{goods_id}) 
        // console.log(res);
        if(res.meta.status !== 200) return uni.$showMsg("没有获取到对应的数据!")
        //将图片展示方式修改为block展示，祛除底边的白边，将.webp替换为.jpg可以避免ios设备显示异常·
        res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g, '<img style="display:block;" ').replace(/webp/g, 'jpg')
        this.goodsDetail = res.message
        console.log("这是根据good_id获取到的商品详情信息:",this.goodsDetail);
      },

下方是通过上面的方法获取接口数据后在控制台中的数据截图,其中goods_introduce就是goodsDetail对象身上中本次渲染用的富文本内容，为了方便查看我使用VSCode将它打开，内容如下图二
图一
图二 此内容即为goods_introduce的详细内容

找不到问题所在，只能通过肉眼看，但是当时没看出来，要是明显的话也不置于小程序正常显示，而安卓无法正常显示。

花了很长时间一番百度，也查看了官方文档，结果没找到与我这个相似内容的有效办法，唯一看到相关的是一位博主说他的支付宝小程序中rich-text内容也无法正常显示，但是通过安装插件将rich-text的内容将字符串转换为数组嵌套对象的方法解决了，我尝试过，但是依然无效。。他的原文链接如下有需要的可以参考:uniapp支付宝小程序项目rich-text不生效解决办法

问了AI，回答的也是全而不精，分析方向太多了，而且当时都没想用模拟器，真机连接HubilderX还一直出错，于是更郁闷了。。。

郁闷完了还能怎么办？继续搞呗！

我想90%的问题理论上都是应该可以查到的啊，在经历一番波折后，找不到那肯定是框架的问题，肯定不能是我的问题了，当时抱着提交bug的心情，我重新去查看了官方文档(准备开喷了)，然后看到了rich-text页面底部的这个：
那你都说让我帮助改善此页面了，我还不直接开喷?(我确实急了…)
点进去看了下，结果问题就顺着解决了。uni-app的rich-text的原文文档链接在此
提交bug之前还是先看了一眼内容，在最后有这么一段示例:
可以看到uni官方的这个文档页面有引入图片的示例，如果真的是不可抗力，那我引入这段应该也无法正常显示在安卓上。

想到了，有能力就应该去做!

修改页面渲染元素为固定，在data函数中声明string1和strings，将string1作为文本进行渲染，将strings使用官方文档提供的图片进行渲染，看看到底是什么问题，代码如下:

  <rich-text :nodes="string1"></rich-text>
  <rich-text :nodes="strings"></rich-text>
   data() {
      return { 
        string1:'1433223',
        strings: '<div style="text-align:center;"><img src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png"/></div>',
      }
    },
  

结果，居然是正常显示了！截图如下:

可以看到右侧中间区域的rich-text内容出现了我们声明的1433223文本和uni官方文档提供的图片，这下有希望了，至少可以断定不是其他地方代码，或者打包引起的原因，并且十有八九就是后台接口返回的富文本字符串问题

后面就是不停的debug测试了，只放一个img标签，然后对img标签的各个属性值进行增加或者减少测试。

问题原因

最终，找到问题所在：接口中返回对象的富文本goods_introduce值中的img标签的宽和高属性是直接写在img标签内部的，小程序的img标签中width属性和height属性直接写在img内部，可以直接生效。但是安卓的却不行，必须写在img标签中的style属性内部才会生效。而这也是为什么小程序rich-text内容显示正常，安卓却没有显示，但是也不报错的原因!!

即应当将返回的富文本从下方代码一改为二类型:
测试代码一：

  <img style="display:block;"
        data-src="//image.suning.cn/uimg/sop/commodity/211432186342298953533300_x.jpg?from=mobile&amp;format=80q.jpg"
        alt="" src="//image.suning.cn/uimg/sop/commodity/211432186342298953533300_x.jpg?from=mobile&format=80q.jpg"
        width="100%" height="auto">"

测试代码二:

 <img src="http://image.suning.cn/uimg/sop/commodity/185453071558664163765950_x.jpg?from=mobile&format=80q.jpg"
 style="display:block;width:100%;height:auto;" />

修改后的页面rich-text渲染逻辑代码如下：

后面就是修改方法中的替换逻辑了，为了偷懒，我没有去除原来返回代码中已有的width=“100%” height=“auto”，而是直接将这两个属性连同原来的display:block属性一并追加到style属性里去。修改后的页面元素和方法如下:

      <rich-text :nodes="goodsDetail.goods_introduce"></rich-text>
      async getGoodDetail(goods_id){
        // console.log(goods_id);
        const { data:res } = await uni.$http.get('/api/public/v1/goods/detail',{goods_id}) 
        // console.log(res);
        if(res.meta.status !== 200) return uni.$showMsg("没有获取到对应的数据!")
        //将图片展示方式修改为block展示，祛除底边的白边，将.webp替换为.jpg可以避免ios设备显示异常·
        // res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g, '<img style="display:block;" ').replace(/webp/g, 'jpg')
       res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g,'<img style="display:block;width:100%;height:auto;"').replace(/.webp/g,'.jpg')
        this.goodsDetail = res.message
        console.log("这是根据good_id获取到的商品详情信息:",this.goodsDetail);
      },

修改后的结果如下:

不过怎么说这个也是模拟器，后面重新打包生成了apk后，在手机上也正常下拉显示了，那么这次debug就算小小的结束了。至于为什么小程序可以直接在img标签里使用width和height属性设置，而安卓却不行，这里我暂时还不清楚，后续(又踩到这个坑)可能会继续研究。。。

---

总结后追更1

今天复习项目重写该页面时，不追加<img style="display:block;width:100%;height:auto"时，该页面中的图片也正常显示出来了，不过追加该属性也不会有什么异常。推测可能是第一次学写uni-app项目时，在创建页面模板没有将默认的Vue3改为Vue2所致，不过暂时还没去详细验证，在此记录一下!

总结

本次遇到的uni-app框架写的rich-text内容在小程序页面可以正常显示，而安卓机无法正常显示的原因，就在于img标签中属性的书写，建议统一将图片的宽高设置都写到img标签中的style属性中，这样小程序和安卓都可以正常显示，否则就可能还会复现本篇博客中出现的问题。本人原创纯手写不易，对大家有帮助的话点点赞吧，谢谢!