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

Question

我正在使用 http Dart package向 MapQuest 静态 map 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 接收的，这是一个异步请求。

Answer 1

根据 Günter Zöchbauer 的建议我将请求 Url 直接包含在我的 Image.network() 小部件中并且它起作用了。

代码如下:

void getStaticMapCoordinates(String address) async {
    if (address.isEmpty) {
      return;
    }

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

    final decodedResponse = json.decode(response.body);
    setState(() {
      _coords = decodedResponse['results'][0]['locations'][0]['latLng'];
    });
  }

  Widget _buildStaticMapImage() {

    if(_coords == null) {
      return Image.asset('assets/product.jpg');
    }
    return FadeInImage(
      image: NetworkImage(
          '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'),
      placeholder: AssetImage('assets/product.jpg'),
    );
  }

每次用户更改地址字段时，getStaticMapCoordinates 函数都会执行，并且作为 setState 的结果，Image Widget 会重新呈现。