Flutter如何在JSON链接无可用图片时显示assets内硬编码本地图片

• 第一步：配置本地占位图片资源
  先将需要用作兜底的本地图片放入项目的assets文件夹（示例路径为assets/images/car_placeholder.png），然后在项目根目录的pubspec.yaml文件中添加资源声明：

flutter:
  assets:
    - assets/images/car_placeholder.png

配置完成后执行flutter pub get使资源生效。

• 第二步：修改CarCard组件的图片加载逻辑
  Flutter官方的Image.network组件内置errorBuilder回调，可直接监听图片加载失败的场景，同时可提前判断URL有效性，直接走兜底逻辑，避免无效网络请求。将CarCard中原来的Image.network(img_url)替换为如下代码即可：

child: img_url.isEmpty
    // URL为空直接显示本地占位图
    ? Image.asset('assets/images/car_placeholder.png')
    : Image.network(
        img_url,
        // 图片加载失败回调，返回本地占位图
        errorBuilder: (context, error, stackTrace) {
          return Image.asset('assets/images/car_placeholder.png');
        },
        // 可选配置：加载过程中显示进度指示器，提升用户体验
        loadingBuilder: (context, child, loadingProgress) {
          if (loadingProgress == null) return child;
          return Center(
            child: CircularProgressIndicator(
              value: loadingProgress.expectedTotalBytes != null
                  ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes!
                  : null,
            ),
          );
        },
      ),

如果不需要加载中状态，直接删除loadingBuilder参数即可。

• 可选优化：提前校验URL合法性
  可以在数据解析阶段就过滤无效URL，进一步优化性能，修改Car.fromJson方法如下：

factory Car.fromJson(Map<String, dynamic> json) {
  String rawImgUrl = json['img_url'] ?? '';
  // 校验是否为合法的http/https链接
  bool isValidNetUrl = rawImgUrl.startsWith(RegExp(r'https?://'));
  return Car(
      name: json['name'],
      id: json['id'],
      img_url: isValidNetUrl ? rawImgUrl : '',
      max_car_id: json['max_car_id'],
      num_models:json['num_models'],
      avg_price: json['avg_price'],
      avg_horsepower: json['avg_horsepower']
  );
}

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