uni-app image组件报Bug

uni-app image组件报Bug

开发环境 版本号 项目创建方式
Windows win10 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win10

HBuilderX类型：正式

HBuilderX版本号：3.2.9

手机系统：Android

手机系统版本号：Android 11

手机厂商：小米

手机机型：小米9P

页面类型：nvue

打包方式：云端

项目创建方式：HBuilderX

### 示例代码：
```html
<scroll-view class="recommendBox mt20 lwbox" :show-scrollbar="false" scroll-x="true"
[@scroll](/user/scroll)="recommendscroll" scroll-left="0">
<view [@click](/user/click)="recommendFun(item)" class="recommendItem" v-for="(item, index) in recommendList" :key="item.id">
<view class="recommendImage">
<image v-if="item.image" class="ub-fh ub-fv" :src="item.image" />
</view>
<view class="mt5">
<text class="el-1 fs24">{{ item.name }}</text>
</view>
</view>
</scroll-view>

操作步骤：

在nvue写循环线上获取的图片

预期结果：

加载出来

实际结果：

偶尔空白，

bug描述：

循环图片的时候，有时候不显示，调试代码显示 图片为none
手动刷新，多次出现这个问题


更多关于uni-app image组件报Bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

<scroll-view class=“recommendBox mt20 lwbox” :show-scrollbar=“false” scroll-x=“true”
@scroll=“recommendscroll” scroll-left=“0”>
<view @click=“recommendFun(item)” class=“recommendItem” v-for="(item, index) in recommendList" :key=“item.id”>
<view class="recommendImage">
<image v-if="item.image" class="ub-fh ub-fv" :src="item.image" />
</view>
<view class="mt5">
<text class="el-1 fs24">{{ item.name }}</text>
</view>
</view>
</scroll-view>

更多关于uni-app image组件报Bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个 nvue的image 怎么办

根据您提供的nvue页面中image组件偶尔显示空白的问题，结合代码和截图分析，这通常是nvue中image组件在渲染网络图片列表时的常见性能问题。

主要原因：

  1. 滚动视图中的图片加载：scroll-view横向滚动时，如果recommendList数据较多，nvue的image组件在快速渲染大量网络图片时，可能出现个别图片加载失败或渲染延迟。
  2. 图片地址问题：item.image为网络路径时，在Android环境下可能因网络波动、图片服务器响应慢或缓存机制导致加载失败，显示为空白（none状态）。
  3. nvue渲染机制：nvue使用原生渲染，对图片加载和内存管理更敏感，尤其在快速滚动或列表频繁更新时，可能出现渲染异常。

解决方案：

  1. 添加加载状态和占位图：为image组件设置默认占位图，并监听加载错误事件。
    <image 
  class="ub-fh ub-fv" 
  :src="item.image" 
  :placeholder="placeholder" 
  @error="handleImageError(index)"
/>
回到顶部