uni-app nuve vue3 本地图片显示问题 求助

uni-app nuve vue3 本地图片显示问题 求助

环境:  
- V3模式  
- NVUE  
- VUE3  

问题  
本地图片 tabBar图片  

在H5、手机调试时,图片正常显示  
打包后,正式APP,图片不显示  

打包后,  
tabBar 的图片,与页面载入本地的图片  
无论是 /imgsrc 绝对路径  
imgsrc 相对路径  
@/imgsrc  

三种情况都无法显示  

| 开发环境 | 版本号 | 项目创建方式 |
|----------|--------|--------------|
| V3模式   | NVUE   | VUE3         |

![图片](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20211112/7ac4c93dcba1f00f975c0c257de62b79.jpg)

相关链接 :  
- [https://ask.dcloud.net.cn/question/134882](https://ask.dcloud.net.cn/question/134882)  

更多关于uni-app nuve vue3 本地图片显示问题 求助的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

HBuilderX 3.2.13 alpha VUE3 iOS12 tabbar显示正常,请提供一个简单的测试工程

更多关于uni-app nuve vue3 本地图片显示问题 求助的实战教程也可以访问 https://www.itying.com/category-93-b0.html


代码也上传,我下了 HBuilderX 3.2.13 alpha 安卓下还是不显示 ,没IOS未测试

代码已上传。
我用的编辑器为 正式版本 3.2.12 安卓

HBuilderX 3.2.14 alpha 正式打包(安卓),复现问题。imgsrc 相对路径图片和tabBar图标iconPath无法显示,问题已记录,后续相关组会优化,已加分,感谢您的反馈!

下个版本修复

还是没修复呢?我用的3.3.13 在H5上正常,app端tabbar的图标都不显示,不管是安卓还是ios

命令行创建的项目什么时候能修复

在uni-app的V3模式、NVUE环境下,本地图片在打包后不显示,通常是由于NVUE的图片资源处理机制与VUE页面不同导致的。以下是关键排查点:

  1. 静态资源路径问题:NVUE对本地图片路径的解析较为严格。请确保图片已放在项目的 static 目录下(这是uni-app默认的静态资源目录)。在代码中引用时,应使用绝对路径 /static/imgsrc.png(注意:路径以 /static 开头,无需使用 @ 或相对路径符号)。

  2. 图片格式和名称:检查图片文件名是否包含特殊字符或中文,建议使用英文、数字、下划线的组合,并确保扩展名正确(如.png、.jpg)。

  3. 打包配置检查:在 manifest.json 中,确认NVUE相关配置是否正确。对于V3模式,需确保已启用NVUE编译选项。如果图片路径在开发环境正常但打包后失效,可能是构建过程中资源未正确打包。尝试清理项目并重新构建:删除 unpackagenode_modules 目录,重新运行 npm install 和打包命令。

  4. 真机调试建议:使用自定义基座进行真机调试,以模拟正式包环境。在HBuilderX中,运行到自定义基座,查看图片是否显示。如果自定义基座中正常,但正式包异常,可能是证书或打包配置问题。

  5. 替代方案:如果问题持续,考虑将图片转换为base64编码或使用网络图片(确保离线可用性)。对于tabBar图片,可以在 pages.json 中直接引用 static 目录下的绝对路径,例如:

    "tabBar": {
      "list": [{
        "iconPath": "/static/tab_home.png",
        "selectedIconPath": "/static/tab_home_active.png"
      }]
    }
回到顶部