Flutter在Android 11上使用NetworkImage加载图片解码失败问题

问题现象 #

使用NetworkImage加载指定URL的图片时，仅在Android 11设备上出现加载失败，Android 12及iOS 17.4环境下可正常显示图片。

异常日志 #

D/HeifDecoderImpl(11496): No valid image or sequence available
E/FlutterJNI(11496): Failed to decode image
E/FlutterJNI(11496): android.graphics.ImageDecoder$DecodeException: Failed to create image decoder with message 'invalid input'Input contained an error.
E/FlutterJNI(11496):    at android.graphics.ImageDecoder.nCreate(Native Method)
E/FlutterJNI(11496):    at android.graphics.ImageDecoder.access$200(ImageDecoder.java:173)
E/FlutterJNI(11496):    at android.graphics.ImageDecoder$ByteBufferSource.createImageDecoder(ImageDecoder.java:250)
E/FlutterJNI(11496):    at android.graphics.ImageDecoder.decodeBitmapImpl(ImageDecoder.java:1862)
E/FlutterJNI(11496):    at android.graphics.ImageDecoder.decodeBitmap(ImageDecoder.java:1855)
E/FlutterJNI(11496):    at io.flutter.embedding.engine.FlutterJNI.decodeImage(FlutterJNI.java:559)

════════ Exception caught by image resource service ════════════════════════════
The following _Exception was thrown resolving an image codec:
Exception: Invalid image data

When the exception was thrown, this was the stack:
#0      _futurize (dart:ui/painting.dart:6966:5)
painting.dart:6966
#1      ImageDescriptor.encoded (dart:ui/painting.dart:6775:12)
painting.dart:6775
#2      instantiateImageCodecWithSize (dart:ui/painting.dart:2287:60)
painting.dart:2287
#3      PaintingBinding.instantiateImageCodecWithSize (package:flutter/src/painting/binding.dart:141:15)
binding.dart:141
#4      NetworkImage._loadAsync (package:flutter/src/painting/_network_image_io.dart:131:20)
_network_image_io.dart:131
<asynchronous suspension>
#5      MultiFrameImageStreamCompleter._handleCodecReady (package:flutter/src/painting/image_stream.dart:985:3)
image_stream.dart:985
<asynchronous suspension>

Image provider: NetworkImage("https://mega-store.s3.eu-west-2.amazonaws.com/shelly/0.2782753988222566.png", scale: 1.0)
Image key: NetworkImage("https://mega-store.s3.eu-west-2.amazonaws.com/shelly/0.2782753988222566.png", scale: 1.0)
════════════════════════════════════════════════════════════════════════════════

原因分析及解决办法 #

1. 图片编码兼容性问题 #

Android 11的HeifDecoderImpl对部分非标准PNG编码支持不足（日志中明确提示No valid image or sequence available）。解决方式：

• 将图片重新编码为标准PNG格式，避免使用特殊压缩算法或HEIF伪装成PNG的情况，可通过Photoshop、GIMP等工具重新导出图片。

2. Android 11 ImageDecoder解码限制 #

Android 11引入的ImageDecoder存在兼容性bug，可通过以下方式绕过：

• 使用第三方图片库：替换为cached_network_image库，该库内置了更完善的图片解码兼容逻辑，能自动处理不同系统的解码差异。
• 手动下载并解码图片：通过dart:io的HttpClient下载图片字节流，再用Image.memory加载，绕开原生NetworkImage的解码流程：

  import 'dart:io';
  import 'dart:typed_data';
  import 'package:flutter/material.dart';
  
  Future<Uint8List> _downloadImage(String url) async {
    final client = HttpClient();
    final request = await client.getUrl(Uri.parse(url));
    final response = await request.close();
    return await response.fold(Uint8List(0), (previous, chunk) {
      final merged = Uint8List(previous.length + chunk.length);
      merged.setAll(0, previous);
      merged.setAll(previous.length, chunk);
      return merged;
    });
  }
  
  // 使用示例
  FutureBuilder<Uint8List>(
    future: _downloadImage("https://mega-store.s3.eu-west-2.amazonaws.com/shelly/0.2782753988222566.png"),
    builder: (context, snapshot) {
      if (snapshot.hasData) {
        return Image.memory(snapshot.data!);
      } else if (snapshot.hasError) {
        return const Icon(Icons.error);
      }
      return const CircularProgressIndicator();
    },
  )
  

• 强制使用旧版解码器：针对Android平台，修改Flutter引擎配置，强制使用BitmapFactory替代ImageDecoder（需自定义Flutter引擎或使用相关插件）。

3. 检查S3存储响应头 #

确认S3返回的Content-Type响应头为image/png，错误的MIME类型会导致Android 11的解码器无法正确识别图片格式。可在S3控制台修改图片对象的元数据，设置正确的Content-Type。

内容的提问来源于stack exchange，提问作者Moaz El-sawaf