NVUE页面在uni-app ANDROID/IOS APP中使用image加载图片不能正常显示内容

NVUE页面在uni-app ANDROID/IOS APP中使用image加载图片不能正常显示内容

开发环境 版本号 项目创建方式
Windows Windows 10 专业版 19045.4046 HBuilderX

测试过的手机：

  • iphone 6s plus
  • 红米K70 Pro

示例代码：

<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显示网络图片

预期结果：

  • 能正常加载显示图片

实际结果：

  • 图片显示异常

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] }"
}

更多关于NVUE页面在uni-app ANDROID/IOS APP中使用image加载图片不能正常显示内容的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于NVUE页面在uni-app ANDROID/IOS APP中使用image加载图片不能正常显示内容的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在nvue页面中image组件加载图片异常是常见问题，主要与weex渲染引擎的图片处理机制有关。从你的描述看，问题集中在第二个tab页面，而首页正常，这通常与页面生命周期和图片加载时机相关。

以下是几个关键排查点：

  1. 图片路径问题：确保item.coverUrl是完整的网络URL，且可公开访问。在真机调试时，检查网络请求是否被拦截。

  2. 图片尺寸与样式：虽然设置了固定宽高，但建议同时设置display: block，避免flex布局计算异常。可尝试改用class定义样式：

<image :src="item.coverUrl" mode="aspectFill" class="fixed-img"/>
<style scoped>
.fixed-img {
  width: 176px;
  height: 300px;
  display: block;
}
</style>

  1. 资源加载竞争：video和image同时存在时，系统资源分配可能优先video。可尝试给image添加lazy-load="false"属性禁用懒加载，或通过v-if控制渲染顺序。

  2. 页面切换缓存：tab切换时，非活跃页面的图片加载可能被暂停。在页面onShow生命周期中触发图片重新加载：

onShow() {
  this.$nextTick(() => {
    // 强制更新图片数据
  })
}
  1. 错误处理优化：当前error事件未返回具体错误信息，可尝试在图片URL后添加时间戳避免缓存：
<image :src="item.coverUrl + '?t=' + Date.now()" />
回到顶部