Flutter中YGOPRODeck API卡牌图片加载失败问题求助

从你给出的错误URL https://images.ygoprodeck.com/images/cards_small}/null 能直接看出两个核心问题：字符串拼接语法错误（多余的}符号）、卡牌ID值为null，以下是针对性的排查和解决步骤：

1. 先确认卡牌ID的有效性 #

• 打印API返回的卡牌数据日志，检查id字段是否存在且不为空。比如在解析完JSON后添加：

  print("卡牌ID: ${card.id}");
  

  如果输出为null，说明你的模型类字段映射错误——检查YGOPRODeck API返回的字段名（比如是否是id而非card_id），修正模型类的JSON解析逻辑。

2. 修正URL拼接的语法错误 #

错误URL里的cards_small}是模板字符串的语法失误，正确的拼接方式应该是：

// 注意要加上.jpg后缀，API要求图片格式为jpg
String imageUrl = "https://images.ygoprodeck.com/images/cards_small/${card.id}.jpg";

确保模板字符串的大括号配对正确，没有多余符号。

3. 优先使用API返回的现成图片URL #

既然API返回的JSON里已经包含card_images数组，直接用image_url_small字段更可靠，避免手动拼接出错：

• 先修正模型类的解析逻辑，确保正确读取该字段：

  class Card {
    List<CardImage>? cardImages;
    // 其他字段...
  
    Card.fromJson(Map<String, dynamic> json) {
      if (json['card_images'] != null) {
        cardImages = (json['card_images'] as List)
            .map((img) => CardImage.fromJson(img))
            .toList();
      }
    }
  }
  
  class CardImage {
    String? imageUrlSmall;
  
    CardImage.fromJson(Map<String, dynamic> json) {
      imageUrlSmall = json['image_url_small'];
    }
  }
  

• 在CardsImages组件中使用该字段，同时做空值判断：

  String? getImageUrl(Card card) {
    if (card.cardImages?.isNotEmpty == true) {
      return card.cardImages!.first.imageUrlSmall;
    }
    // 无有效图片时返回占位图
    return "assets/default_card_placeholder.png";
  }
  

4. 全局空值防护 #

不管用哪种方式加载图片，都要添加空值判断，避免因数据异常导致404或崩溃：

Image.network(
  getImageUrl(card) ?? "assets/default_card_placeholder.png",
  errorBuilder: (context, error, stackTrace) {
    return Image.asset("assets/default_card_placeholder.png");
  },
)

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