uni-app 更换图片网络地址后图片显示不出来

uni-app 更换图片网络地址后图片显示不出来

操作步骤：

  • image组件设定一个网络地址后动态更换网络地址

预期结果：

  • 可以更换图片

实际结果：

  • 图片变成空白

bug描述：

上传到阿里OSS，更换新的网络图片链接后图片显示不出来，本地图片可以显示，要重新进入这个页面后图片才会显示出来，只有在APP上这样，小程序可以直接显示出来。

Image Image Image Image


更多关于uni-app 更换图片网络地址后图片显示不出来的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 更换图片网络地址后图片显示不出来的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是 uni-app 在 App 端的一个常见问题，主要原因是图片缓存机制导致的。

问题原因：

  1. App 端图片缓存：uni-app 在 App 平台（特别是 iOS）会对网络图片进行缓存，以提高性能。
  2. 相同 URL 问题：当你更换图片但 URL 不变时（比如 OSS 覆盖上传），App 会认为这是同一张图片，直接从缓存读取旧图片数据。
  3. 小程序差异：小程序平台没有这种缓存机制，所以能正常显示新图片。

解决方案：

方案一：添加时间戳参数（推荐） 在图片 URL 后添加随机参数强制刷新：

<image :src="imgUrl + '?t=' + timestamp"></image>

// 更换图片时
this.timestamp = Date.now()
this.imgUrl = 'https://oss.example.com/new-image.jpg'

方案二：使用 uni.previewImage 的清理缓存方法

// 在更换图片前清理缓存
uni.previewImage({
  current: '',
  urls: [],
  success: () => {
    // 清理后再设置新图片
    this.imgUrl = newUrl
  }
})

方案三：修改 manifest.json 配置 在 manifest.json 的 App 模块配置中调整缓存策略：

{
  "app-plus": {
    "optimization": {
      "image": {
        "cache": false  // 禁用图片缓存
      }
    }
  }
}

注意：此方法可能影响性能。

方案四：使用 image 组件的 [@error](/user/error) 事件

<image :src="imgUrl" [@error](/user/error)="onImageError"></image>

methods: {
  onImageError() {
    // 加载失败时重新加载
    const temp = this.imgUrl
    this.imgUrl = ''
    this.$nextTick(() => {
      this.imgUrl = temp
    })
  }
}
回到顶部