- 发布：2025-11-17 17:00
- 更新：2025-11-17 17:00
- 阅读：19
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： Windows 10 专业版 19045.4046
HBuilderX类型： 正式
HBuilderX版本号： 4.85
手机系统： 全部
手机厂商： 华为
页面类型： nvue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
测试过的手机：
示例代码：
<image
:src="item.coverUrl"
mode="aspectFill"
:style="{width: `176px`, height: `300px`}"
/>
pages.json内的页面
{
"path": "pages/home/home",
"style": {
"navigationStyle": "custom",
"app-plus": {
"bounce": "none"
}
},
"nvue": true,
"nvueStyleCompiler": "uni-app"
},
{
"path": "pages/creaVid/templateList",
"style": {
"navigationBarTitleText": "创作",
"enablePullDownRefresh": true,
"app-plus": {
"bounce": "none"
}
},
"nvue": true,
"nvueStyleCompiler": "uni-app"
},
.......
"tabBar": {
....
"list": [
{
"iconPath": "static/tabbar/unchecked_home.png",
"selectedIconPath": "static/tabbar/home.png",
"pagePath": "pages/home/home",
"text": "首页"
},
{
"iconPath": "/static/tabbar/unchecked_ai.png",
"selectedIconPath": "/static/tabbar/ai.png",
"pagePath": "pages/creaVid/templateList",
"text": "创作"
},
........
<image
:src="item.coverUrl"
mode="aspectFill"
:style="{width: `176px`, height: `300px`}"
/>pages.json内的页面
{
"path": "pages/home/home",
"style": {
"navigationStyle": "custom",
"app-plus": {
"bounce": "none"
}
},
"nvue": true,
"nvueStyleCompiler": "uni-app"
},
{
"path": "pages/creaVid/templateList",
"style": {
"navigationBarTitleText": "创作",
"enablePullDownRefresh": true,
"app-plus": {
"bounce": "none"
}
},
"nvue": true,
"nvueStyleCompiler": "uni-app"
},
.......
"tabBar": {
....
"list": [
{
"iconPath": "static/tabbar/unchecked_home.png",
"selectedIconPath": "static/tabbar/home.png",
"pagePath": "pages/home/home",
"text": "首页"
},
{
"iconPath": "/static/tabbar/unchecked_ai.png",
"selectedIconPath": "/static/tabbar/ai.png",
"pagePath": "pages/creaVid/templateList",
"text": "创作"
},
........操作步骤：
页面使用image显示网络图片
页面使用image显示网络图片
预期结果：
能正常加载显示图片
能正常加载显示图片
实际结果：
图片显示异常
图片显示异常
bug描述：
使用nvue开发页面，页面上会同时存在video和image，在ANDROID/IOS APP下，页面image很大概率图片会无法显示，就是什么内容都没有显示。
这问题比较奇怪，APP使用tabBar，有四个页面，
第一个tab首页是nvue，但首页上（也是video/image同时存在）的效果就比较好，目前未发现image无法显示图片情况，
第二个tab页面是nvue，也是video/image同时存在，但image就会出现很多图片无法正常加载显示的问题，设置image的background-color能看到颜色块，所以位置大小不是问题，在image设置@error=接收事件，能接收到出错如下：
{
"type": "error",
"timeStamp": 1763361291667,
"target": {
"id": "",
"dataset": {},
"offsetLeft": 0,
"offsetTop": 0
},
"currentTarget": {
"id": "",
"dataset": {},
"offsetLeft": 0,
"offsetTop": 0
},
"detail": {},
"stopPropagation": "function() { [native code] }",
"preventDefault": "function() { [native code] }"
}把页面上的video全去掉，保持nvue格式，运行也是很多image无法正常加载图片。
如果把nvue修改成vue，图片都能正常加载显示，感觉这是构建后兼容问题。
试了下其它的nvue页面，image也是会出现有不能正常加载图片情况。
还有另一个情况是我在首页页面上用image加载显示这图片，在其它页面就能正常显示。
