uni-app 在页面上创建多个image组件 src使用外链url 应用切换到后台后 使用多个其他app无需息屏 半小时后切换到前台 部分图片组件会显示为undefined或空白 必现

发布于 1周前 作者 gougou168 来自 Uni-App

uni-app 在页面上创建多个image组件 src使用外链url 应用切换到后台后 使用多个其他app无需息屏 半小时后切换到前台 部分图片组件会显示为undefined或空白 必现

示例代码：

<template>  
    <view class="msg_user_avatar" v-for="(item,index) in imgList " :key="index">  
           <image :src="item" mode="aspectFill" />  
    </view>           
</template>  
<script>  
    export default {  
        data() {  
            imgList:[
                 "http://119.60.25.62:19000/user-photo/20240903/1724917237-compressed-IMG_1673_20240903143647A060.JPG",  
                 "http://119.60.25.62:19000/user-photo/20241101/1120_20241101102653A002.jpg",  
                 "http://119.60.25.62:19000/user-photo/20241108/u1510323015234402892fm253fmtautoapp138fJPEG_20241108130746A055.webp"
                  ...
                  ...
                  ...
             ]
     }   
}  
</script>

操作步骤：

  • 页面创建10+个图片，app切换到后台，然后使用其他的app应用，半个小时后，切换到前台，部分图片会显示undefined或空白页面。

预期结果：

  • 期望正常显示图片，或正常显示的解决方案。已尝试其他方案，background, canvas drwa-image, uni.download后的地址，图片转base64，还是会出现undefined

实际结果：

  • 还是会出现undefined或者空白

bug描述：

  • app切换到后台，然后使用其他的app应用，半个小时后，部分图片会显示undefined或空白，必现。

| 信息类别       | 详细信息      |
|----------------|---------------|
| 产品分类       | uniapp/App    |
| PC开发环境操作系统 | Windows       |
| PC开发环境操作系统版本号 | win11         |
| HBuilderX类型  | 正式          |
| HBuilderX版本号 | 4.28          |
| 手机系统       | iOS           |
| 手机系统版本号  | iOS 18        |
| 手机厂商       | 苹果          |
| 手机机型       | iphone15      |
| 页面类型       | vue           |
| vue版本        | vue2          |
| 打包方式       | 云端          |
| 项目创建方式   | HBuilderX     |

Harmonyos Next教程
8 回复

你好，我这里没有复现这个问题，看起来就算你的url为undefined，那么也不会在图片上显示undefined。
你可以检查一下后端图片是否正常，或者将相关的代码逻辑提取出来，提供一个可以复现的项目。


上下用的同一个图片，有的能显示，有的显示undefined

回复 山葵蛋卷: 可以提供一个可以复现的项目吗？

回复 DCloud_UNI_yuhe: 在列表页面，图片为外链，将APP切到后台，半个小时左右，再切到前台，图片会显示undefined

回复 山葵蛋卷: 你提供一个完整的可运行的项目吧

请问楼主解决了吗

在列表页面，图片为外链，将APP切到后台，半个小时左右，再切到前台，图片会显示undefined

针对你提到的 uni-app 在页面创建多个 image 组件并使用外链 URL 作为 src，在应用切换到后台后，使用多个其他应用无需息屏，半小时后切换到前台时，部分图片组件会显示为 undefined 或空白的问题，这里提供一个可能的解决方案和代码示例。

这个问题可能是由于应用切换到后台后，系统为了节省资源，可能会暂停网络请求或释放一些资源，导致部分图片资源没有正确加载或缓存被清除。

解决方案

  1. 使用图片加载错误事件重新加载： 在 image 组件上监听 error 事件，当图片加载失败时，尝试重新加载图片。

  2. 使用本地缓存： 对于重要的图片资源，可以考虑在应用启动时或图片加载时，将这些图片缓存到本地，使用本地路径加载图片，以减少对外部资源的依赖。

代码示例

以下是使用图片加载错误事件重新加载的示例代码：

<template>
  <view>
    <block v-for="(imgUrl, index) in imageUrls" :key="index">
      <image
        :src="imgUrl"
        @error="handleImageError(index, imgUrl)"
        style="width: 100px; height: 100px; margin: 10px;"
      />
    </block>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageUrls: [
        'https://example.com/image1.jpg',
        'https://example.com/image2.jpg',
        // 更多图片URL
      ],
      reloadAttempts: {} // 记录每个图片的重新加载次数
    };
  },
  methods: {
    handleImageError(index, imgUrl) {
      const maxRetries = 3; // 最大重新加载次数
      let retries = this.reloadAttempts[index] || 0;
      
      if (retries < maxRetries) {
        retries++;
        this.reloadAttempts[index] = retries;
        
        // 延迟重新加载，避免频繁请求
        setTimeout(() => {
          this.$set(this.imageUrls, index, imgUrl); // 重新设置src以触发重新加载
        }, 1000);
      } else {
        // 如果达到最大重新加载次数，可以替换为占位图或显示错误信息
        this.$set(this.imageUrls, index, 'path/to/placeholder.jpg');
      }
    }
  }
};
</script>

注意事项

  • 性能考虑：重新加载图片可能会增加网络请求，对性能有一定影响，特别是在网络状况不佳的情况下。
  • 用户体验：在重新加载图片时，可以添加一些用户提示，如显示加载中的图标或文字，提升用户体验。
  • 缓存策略：对于频繁访问的图片资源，可以考虑使用本地缓存策略，减少网络请求。

通过上述方法，可以在一定程度上减少图片加载失败的问题，提升应用的稳定性和用户体验。

回到顶部