如何在 flutter 中显示从 API 响应接收到的图像？

Question

我正在使用http Dart 包向 MapQuest Static Maps API发送GET请求以获取图像。但是，对此请求的响应直接返回图像，而不是Uri，或者也许我做错了什么。

你能帮我显示收到的图像吗？

这是请求代码：

 final http.Response response = await http.get(
    'https://www.mapquestapi.com/geocoding/v1/address?key=[MYAPIKEY]&inFormat=kvp&outFormat=json&location=${address}&thumbMaps=false&maxResults=1');

final decodedResponse = json.decode(response.body);
setState(() {
  _coords = decodedResponse['results'][0]['locations'][0]['latLng'];
});
 final http.Response staticMapResponse = await http.get(
        'https://www.mapquestapi.com/staticmap/v5/map?key=[MYAPIKEY]&center=${coords['lat']},${coords['lng']}&zoom=13&type=hyb&locations=${coords['lat']},${coords['lng']}&size=500,300@2x');

坐标是从 MapQuest 的地理编码 API 接收的，这是一个async请求。

Answer 1

我使用 Image 类从响应正文以字节流形式创建内存中图像对象。

var _profileImage = Image.memory(response.bodyBytes).image;

现在您可以直接在组件中加载该图像。

Answer 2

按照 G\xc3\xbcnter Z\xc3\xb6chbauer的建议，我将请求 Url 直接包含在我的 Image.network() 小部件中并且它有效。

\n\n

这是代码：

\n\n

void getStaticMapCoordinates(String address) async {\n    if (address.isEmpty) {\n      return;\n    }\n\n    final http.Response response = await http.get(\n        \'https://www.mapquestapi.com/geocoding/v1/address?key=[APIKEY]&inFormat=kvp&outFormat=json&location=${address}&thumbMaps=false&maxResults=1\');\n\n    final decodedResponse = json.decode(response.body);\n    setState(() {\n      _coords = decodedResponse[\'results\'][0][\'locations\'][0][\'latLng\'];\n    });\n  }\n\n  Widget _buildStaticMapImage() {\n\n    if(_coords == null) {\n      return Image.asset(\'assets/product.jpg\');\n    }\n    return FadeInImage(\n      image: NetworkImage(\n          \'https://www.mapquestapi.com/staticmap/v5/map?key=[APIKEY]&center=${_coords[\'lat\']},${_coords[\'lng\']}&zoom=13&type=hyb&locations=${_coords[\'lat\']},${_coords[\'lng\']}&size=500,300@2x\'),\n      placeholder: AssetImage(\'assets/product.jpg\'),\n    );\n  }\n

\n\n

每次用户更改地址字段时都会执行该getStaticMapCoordinates函数，并且setState图像小部件会重新呈现。

\n