Flutter中检测空字符串并解决图片加载400错误的方案

当API返回stream_icon为空字符串""时，原有空值判断逻辑失效，应用崩溃，报错显示向https://image.tmdb.org/t/p/w600_and_h900_bestv2发起的HTTP请求返回400状态码。正常返回有效图片路径时可正常加载，现需正确检测空字符串并显示missingicon.jpg。

当前代码 #

Image.network(
  stream['stream_icon'] != "" ? stream['stream_icon'] : 'missingicon.jpg',
  width: 100,
  height: 150,
  fit: BoxFit.cover,
  errorBuilder: (BuildContext context, Object error, StackTrace? stackTrace) {
    print('Error loading image: $error');
    print('Stack trace: $stackTrace');

    return Image.network(
      'missingicon.jpg',
      width: 100,
      height: 150,
      fit: BoxFit.cover,
    );
  },
),

报错信息 #

Error: HTTP request failed, statusCode: 400, https://image.tmdb.org/t/p/w600_and_h900_bestv2
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 297:3       throw_
packages/flutter/src/painting/_network_image_web.dart 146:11                      <fn>
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 550:37  _checkAndCall
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 555:39  dcall

解决方法 #

问题核心是空字符串判断不够严谨，需同时处理null、空字符串及仅含空白字符的情况：

1. 优化空值判断逻辑

Image.network(
  // 先校验非null，再判断是否为非空（含去除空白字符后的校验）
  (stream['stream_icon'] != null && stream['stream_icon'].trim().isNotEmpty) 
      ? stream['stream_icon'] 
      : 'missingicon.jpg',
  width: 100,
  height: 150,
  fit: BoxFit.cover,
  errorBuilder: (BuildContext context, Object error, StackTrace? stackTrace) {
    print('Error loading image: $error');
    print('Stack trace: $stackTrace');

    return Image.network(
      'missingicon.jpg',
      width: 100,
      height: 150,
      fit: BoxFit.cover,
    );
  },
),

2. 额外优化：本地占位图替代网络请求
   如果missingicon.jpg是本地资源，建议用Image.asset替换Image.network，避免不必要的网络请求：

// 替换errorBuilder中的返回代码
return Image.asset(
  'assets/images/missingicon.jpg', // 根据你的本地资源路径调整
  width: 100,
  height: 150,
  fit: BoxFit.cover,
);

内容的提问来源于stack exchange，提问作者Jesper2908