Flutter从列表读取Image.asset资源无法显示问题排查

问题原因 #

你的写法核心错误是变量调用逻辑错误：

• product是包含4个对象的数组类型，只能通过整数下标访问数组元素，不能直接用'assets'作为键取值。你当前的写法实际取到的product['assets']值为null，拼接出的资源路径无效，自然无法加载图片。

修复方案 #

1. 如果你要取指定位置的产品图片，需要先指定数组下标，比如取第一个产品的图片写法为：

Image.asset("assets/${product[0]['assets']}")

2. 如果是列表遍历渲染的场景，需要在遍历回调中取当前下标对应的元素，示例如下：

ListView.builder(
  itemCount: product.length,
  itemBuilder: (context, index) {
    final currentProduct = product[index];
    return Image.asset("assets/${currentProduct['assets']}");
  }
)

额外排查点 #

如果修复后仍无法加载，可以检查以下两项：

• 确认assets文件夹下的图片文件名和数组中assets字段的取值大小写完全一致，Flutter的资源路径对大小写敏感
• 确认修改配置后已经执行flutter pub get，仍有问题可以执行flutter clean清理缓存后重新编译运行

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