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

Posted 2023-02-23

【中文标题】如何显示从 API 响应中接收到的图像？

【英文标题】：How to display images, received from an API response in flutter?

【发布时间】：2019-04-04 17:04:24

【问题描述】：

我正在使用 http Dart package 向 MapQuest 静态地图 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 请求。

【问题讨论】：

从 api 显示图像：flutter.io/cookbook/images/network-image

我尝试过使用 Image.network()，关键是它需要一个字符串值作为图像的 url，我没有从 GET 请求中收到。

只需将您传递给 GET 请求的字符串传递给 NetworkImage，NetworkImage 就会为您发出 GET 请求。否则使用docs.flutter.io/flutter/widgets/Image/Image.memory.html

@GünterZöchbauer 非常感谢！！直接在 Image.network() 中传入 Request Url 有效。

【参考方案1】：

正如Günter Zöchbauer 所建议的那样，我将请求网址直接包含在我的 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，图像小部件会重新呈现。

【讨论】：

请求中有什么header？

【参考方案2】：

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

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

现在你可以直接在你的组件中加载这个图片了。

【参考方案3】：

如果图片是来自您的 URL 的休息：

//...
    child: new ClipRRect(
         borderRadius: new BorderRadius.circular(30.0),
         child: Image.network('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', 
                              fit: BoxFit.cover, 
                              height: 60.0, width: 60.0))    
    //...

如果需要解析：

  final response = 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');

  if (response.statusCode == 200) 
    // If the call to the server was successful, parse the JSON
    return json.decode(response.body)["imageURL"]; //  <------- DO THE PARSING HERE AND THEN PASS THE URL TO THE ABOVE EXAMPLE
   else 
    // If that call was not successful, throw an error.
    throw Exception('Failed to load post');
  

【讨论】：

感谢您的回复，但 API 不会返回 Json 中的图像 url。它返回图像。供参考：developer.mapquest.com/documentation/static-map-api/v5

【参考方案4】：

您可以将标题添加到 NetworkImage 小部件，例如： NetworkImage("你的端点 URL", headers: header:value) 以下链接有更多信息。https://api.flutter.dev/flutter/widgets/Image/Image.network.html

【参考方案5】：

有时从带有复杂标题的 URL 获取图像很麻烦。所以那个时候，我们可以直接在NetworkImage小部件中使用header map，它就像一个魅力-

        .
        .
    child: CircleAvatar(
            backgroundImage:
            NetworkImage("www.mypropic.com",headers:getTokenHeaders());)
        .
        . 

    static Map<String, String> getTokenHeaders() 
    Map<String, String> headers = new Map();
    headers['Authorization'] = _bearerToken!;
    headers['content-type'] = 'application/json';
    return headers;