使用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/[email protected]"/></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&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属性中，这样小程序和安卓都可以正常显示，否则就可能还会复现本篇博客中出现的问题。本人原创纯手写不易，对大家有帮助的话点点赞吧，谢谢!