如何在颤动中显示来自api响应的png图像？

Posted 2023-02-23

【中文标题】如何在颤动中显示来自api响应的png图像？

【英文标题】：How to display a png image from api response in flutter?

【发布时间】：2021-12-18 09:26:43

【问题描述】：

我得到一个 PNG 图像（不是 URI）作为对我的 api 请求的响应，如下所示：

Future PostToGetPostImages(String pic_id,String pic_type) async 
    try 
      var parms = 
        'code': pic_type+"_"+pic_id,
      ;

      Response response = await _dio.post(_get_post_image,
          data: parms,
          options: Options(contentType: Headers.formUrlEncodedContentType),
          onSendProgress: (int sent, int total) 
            print('sent : $sent // total : $total');
          , onReceiveProgress: (v, s) 
            print('v : $v // s : $s');
          );

      print('***** Response body Download Profile Images: $response.data **********');
      
      return response.data;
     catch (error, stacktrace) 
      _handleError(error);
      print("Exception occured A: $error stackTrace: $stacktrace");
    
  

这是执行后打印的内容：

I/flutter (12777): ***** Response body Download Profile Images: �PNG

我需要知道如何在颤动中显示此响应（png 图像），我正在使用此代码但它不起作用：

FutureBuilder(
                    future: aptProvider().PostToGetProfileImages("1", "m"),
                    builder: (context, snapshot) 
                      return CircleAvatar(
                          radius: 65.0,
                          backgroundImage: backgroundImage: NetworkImage(snapshot.data
                            .toString()));
                    ),

【问题讨论】：

请分享您的 json 数据示例，之后我可以为您提供更多帮助，因为您使用了不正确的函数格式。你需要使用 mvvm 技术

在这里评论你的网址

【参考方案1】：

也许 png 就像一个 404 的虚拟图像，就像附加图像中的那个一样，所以你必须复制并尝试使用 Image.network 检查它，如果一切正常，你继续使用 image.network

【讨论】：

我不能使用 Image.network 因为 CircleAvatar 需要一个 ImageProvider Widget

尝试使用容器（高度：20，宽度：20，装饰：盒子装饰（图片：装饰图片（网络图片（url））））

什么都没有改变

【参考方案2】：

这里的问题是您没有使用 URL 图片，确认使用以 (.png, jpg, ..etc.) 结尾的 URL 并通过在浏览器中打开它来确认。

然后

使用其中一种方式在您的小部件中显示它

第一

Image.network('URL') 
// ex: Image.network('https://picsum.photos/250?image=9')

第二

Container( height : 100 , width :100 , decoration : Box decoration ( 
  image : Decoration image ( Network image ('URL'), ), 
), ), ),

【讨论】：

API 返回的是图像数据而不是 URL，这是我的问题

【参考方案3】：

您似乎将图像作为字节数组，base64 字符串。

这是我解决这个问题的方法。

var base64 = response.split(';base64,')[1];
base64 = base64.replaceFirst('binary data/', '');
Uint8List bytes = base64Decode(base64);

// Image Widget which you can put in anywhere.
Image.memory(bytes, fit: BoxFit.contain)

【讨论】：

我有这个异常，发生异常 A: RangeError (index): Invalid value: Only valid value is 0: 1

【参考方案4】：

如果您从响应中获取图像 url，那么您可以使用 Image.network(imageUrl)

或

如果你获取的是Uint8List形式的imageData，那么你可以使用Image.memory(imageData)

【讨论】：

我试过了，但它说响应是一个字符串