Flutter - 访问 JSON 存储的图像并在列表视图中显示答案

【问题标题】：Flutter - Accessing JSON stored image and displaying in listviewFlutter - 访问 JSON 存储的图像并在列表视图中显示
【发布时间】：2018-11-05 19:23:09
【问题描述】：

对于我的 Flutter 应用程序，我想将 JSON 数据图像显示到列表视图中。下面我输入了我的数据的一个简短示例。

目前我正在使用以下方法获取我的数据：

Future<String> getJsonData() async {
var response = await 
rootBundle.loadString('assests/data/test.json');

this.setState(() {
  var convertDataToJson = json.decode(response);
  data = convertDataToJson;
});

我正在使用以下方式输出我的数据：

child: new Text(data[index]['text'])

我如何输出存储的img？

Img: "PB:29110b176efb5c79_normal.jpeg"

【问题讨论】：

“存储的图像”是什么意思？是二进制图像数据，还是图像文件的名称（和路径）？
我不太清楚，我对使用 Flutter 和 JSON 很陌生，在 JSON 文件中，字段 img 存储为“PB:29110b176efb5c79_normal.jpeg”，我只想显示这张图片到应用程序
"PB:29110b176efb5c79_normal.jpeg" 只是一个字符串，不是图像。

标签： json image dart flutter

【解决方案1】：

我假设您在assets/ 目录中有这些图像，并将这些图像添加到pubspec.yaml 文件中，如下所示：

flutter:
  assets:
    - assets/image01.jpg
    - assets/image02.jpg

如果你有很多文件，你也可以提到目录，如下所示：

flutter:
  assets:
    - assets/

如果这两个要求已经满足，您可以使用以下代码轻松显示图像：

Image.asset(data[index]['Img']);

JSON 中的图像路径应与资产目录正确映射。

【讨论】：

我没有将图像放在资产目录中，因为 JSON 文件有 200 多个条目，这些条目都有链接到数据的图像。这是我唯一的选择吗？
这些图片在哪里？在资产目录或图像在网络上（如 S3 或其他地方）。
JSON 文件存储在 assests/data/test.json 中。该文件最初是从 mongodb 集群中获取的，但我们无法使用该集群，因此我们将其导入。我们不知道数据最初是从哪里获取的
您可以查看更新后的答案。您还可以提及目录名称。在这种情况下，您不必指定单个文件。