uniapp在真机上图片显示问题，有点坑~

• 我是用uniapp开发手机app应用

首页

我首页的图片、轮播图，刚开始使用的img标签。

• 浏览器测试确实是没有问题，然后我连接手机运行到真机上,结果图片不展示。真的卧槽了

解决方法

• 很简单，把img标签换成image标签即可，完美解决。

富文本

我用的 u-parse ，uview-plus3组件库里面的。

功能：通知公告

• 里面的详情涉及到图片、视频、文字等，我这边采用是富文本。

踩坑

• 依旧如此，浏览器测试可以，但在我手机上，图片和视频都不显示

• 浏览器的展示效果

• 真机上的我这边不方便贴图片，就是没显示图片，然后视频也放不了，也没报错。

测试

这个content里面的内容就是我富文本所需要的内容

可以看出来是img标签，然后地址好像也有问题，地址是我这边配置了nginx转发了导致的，所以我们需要对content这个字符串匹配替换我们需要的内容

item.content = item.content.replace(/<img/g, '<image')
                            .replace(/127.0.0.1:88/g, 'xxx.xxx.xx.xxx:8082')
                            
                            // 这里的xx替换成你需要的地址
                            
                            // 注意：看下面的代码，才是正确的。

视频在手机上和浏览器都可以正常播放了，我已经测试了，但是这图片咋就没出来呢？？？？我也测试把富文本里面的image那串单独拎出来放到html里面看图片也渲染出来了啊。真tm奇怪。。后面发现，原来富文本就是需要img标签不需要转换城image标签不然识别不出来

// 这里的xx替换成你需要的地址
item.content = item.content.replace(/127.0.0.1:88/g, 'xxx.xxx.xx.xxx:8082')

• 完美，我手机上也测试了，图片正常显示，视频也可以正常播放。

总结一下这个坑

1. uniapp 编译成h5 认识img也认识image
2. 富文本编译是用原生的标签，富文本只认识img
3. 编译成其他的就只认识image