flutter - 为什么FadeInImage在图片加载成功后仍显示占位符？

Question

  FadeInImage(
    fit: BoxFit.cover,
    image: ResizeImage(
        NetworkImage(snapshot.data!.artUri.toString(),
            headers: const {
              'User-Agent':
                  'Mozilla/5.0 (Linux; U; Android 8.1.0; zh-cn; BLA-AL00 Build/HUAWEIBLA-AL00) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.132 MQQBrowser/8.9 Mobile Safari/537.36',
            }),
        width: 100),
    placeholder: MemoryImage(kTransparentImage),
    imageErrorBuilder: (context, url, error) {
      return const Image(
        image: ResizeImage(AssetImage('assets/images/album.png'),
            width: 100),
      );
    },
  ),
))),

当图片加载失败后会显示imageErrorBuilder，再更改snapshot.data!.artUri为正常Uri并且重新构建后会一直显示占位符(一片白色),即使在Devtools Network中看到图片请求成功且没有异常，仍为占位符，不会显示图片

Answer 1

基本用法：

FadeInImage.assetNetwork(
            placeholder: 'assets/loading.gif',
            image: 'https://picsum.photos/250?image=9',
          )

placeholder: 本地的一张图片
image: 是图片的url

你上面的image属性是一个组件（不是图片url）估计这里有问题；可以使用上面的基本用法逐步添加代码排查一下

Answer 2

出现FadeInImage在图片加载成功后仍显示占位符的问题，可能是由于几个不同的原因导致的。基于你提供的代码和描述，以下是一些可能的原因及相应的解决方案：

1. 图片加载状态未正确更新

FadeInImage组件依赖于其image属性中的图片加载状态来显示相应的图像或占位符。如果图片加载状态没有正确更新（例如，由于网络请求库或状态管理的问题），则可能会持续显示占位符。

解决方案：

• 确保snapshot.data!.artUri在状态更新后确实指向了一个有效的图片URL。
• 检查是否有任何异步操作或状态更新被延迟或阻塞。

2. ResizeImage组件的问题

在你的代码中，ResizeImage可能是一个自定义组件，用于调整图片大小。如果ResizeImage内部没有正确处理图片加载状态或图片数据，它可能会阻止FadeInImage接收到正确的图片加载信号。

解决方案：

• 检查ResizeImage组件的实现，确保它正确地将图片加载状态传递给其子组件。
• 尝试直接使用NetworkImage而不通过ResizeImage，看问题是否仍然存在。

3. 缓存问题

如果图片被缓存，并且缓存的图片是损坏的或无法正确显示的，那么即使URL更新为有效的图片，也可能仍然显示占位符。

解决方案：

• 清除应用的缓存并重新加载图片。
• 在NetworkImage中设置cachePolicy为CachePolicy.noCache来强制不使用缓存。

4. Flutter或Dart的bug

虽然不太可能，但有时Flutter或Dart的bug也可能导致此类问题。

解决方案：

• 确保你的Flutter和Dart环境是最新的。
• 搜索是否有其他开发者报告了类似的问题。

5. 调试和日志

添加日志输出以跟踪图片加载的状态和过程，这可以帮助你更清楚地了解问题所在。

示例：

print("正在加载图片: ${snapshot.data!.artUri}");

在FadeInImage的父组件或相关逻辑中添加此类日志输出，可以帮助你跟踪图片的加载和显示过程。

综上所述，你需要检查图片URL的有效性、ResizeImage组件的实现、缓存策略以及Flutter/Dart环境，以诊断并解决这个问题。