Question

我正在使用http Dart package向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');

从async请求的MapQuest地理编码API接收坐标。

Answer 1

根据Günter Zöchbauer的建议，我将Request 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重新呈现。

Answer 2

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

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

现在您可以直接将此图像加载到组件中。

Answer 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');
  }

Answer 4

您可以将标头添加到NetworkImage小部件中，例如： NetworkImage（“您的端点URL”，标题：{header：value}）以下链接具有更多信息。
https://api.flutter.dev/flutter/widgets/Image/Image.network.html

Answer 5

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

        .
        .
    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;
  }

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

5 个答案: