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

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

首页

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

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

解决方法

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

富文本

我用的 u-parseuview-plus3组件库里面的。

功能:通知公告

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

踩坑

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

  • 浏览器的展示效果

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

测试

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

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

ts 复制代码
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标签不然识别不出来

ts 复制代码
// 这里的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
相关推荐
木斯佳12 分钟前
前端八股文面经大全:字节暑期前端一面(2026-04-21)·面经深度解析
前端·面试·校招·面经·实习
Jolyne_39 分钟前
前端从0开始的LangChain学习(一)
前端·langchain
掘金一周1 小时前
掘友们,一人说一个你买过夯到爆的东西 | 沸点周刊 4.23
前端·人工智能·后端
Developer_Niuge1 小时前
告别翻不动的 1000+ 书签:开源 Chrome / Edge 浏览器书签管理插件 Smart Bookmark 0.2 发布
前端·后端
WebInfra1 小时前
Rsbuild 2.0 发布:即将支持 TanStack Start
前端·javascript·程序员
用户52709648744901 小时前
前端性能指标速查手册
前端
淹死在鱼塘的程序猿1 小时前
🚀 告别"一次性聊天":揭秘让 AI 智能体越用越聪明的秘密武器 —— Skills
前端·人工智能·agent
掘金安东尼1 小时前
OpenMUSE 全面详解:非扩散Transformer文生图开源基座(对标GPT Image 2)
前端·javascript·面试
~ rainbow~1 小时前
前端转型全栈(六)——深入浅出:文件上传的原理与进阶
前端·http·文件上传
我就是马云飞2 小时前
我废了!大厂10年的我面了20家公司,面试官让我回去等通知!
android·前端·程序员