无法从 API 获取图像

Posted

技术标签:

【中文标题】无法从 API 获取图像【英文标题】：Cannot get an image from API 【发布时间】：2020-10-22 01:42:55 【问题描述】：

我创建了一个与（API）连接的颤振应用程序，一切正常，我可以从我的 API 获取所有数据，但是对于图像，我遇到了一个问题，在颤振中我从 API 获得了正确的图像 URL，我试一试，当我像这样粘贴 URL 时效果很好，一切都很好，并且图像显示在移动设备中：

 leading: Image.network("http://192.168.43.106:3000/cupload/0157d41e-4db9-4d9a-9632-84c8a4cc15f1.png"),

这个 url (http://192.168.43.106:3000/cupload/0157d41e-4db9-4d9a-9632-84c8a4cc15f1.png)，我通过这个代码从 API 获取它.....

getCategories() async 
    var res = await http.get("http://192.168.43.106:3000/cat");
    if(res.statusCode == 200)
        var jsonObject = json.decode(res.body);
        print(jsonObject['result']);
        return jsonObject['result'];

然后：

@override
  void initState() 
    getCategories();
    super.initState();
  
  @override
  Widget build(BuildContext context) 
    return Center(
      child: FutureBuilder(
        future: getCategories(),
        builder: (context, snapshot)
          if(snapshot.data != null)
              return ListView.builder(
                itemCount: snapshot.data.length,
                itemBuilder: (context, index)
                  return ListTile(
                    leading: Image.network(snapshot.data[index]['img']),/*

但正如你在我制作时看到的那样

leading: Image.network(snapshot.data[index]['img'])

手机中没有任何显示，我看到了这条消息：

I/flutter (25006): ══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
I/flutter (25006): The following NetworkImageLoadException was thrown resolving an image codec:
I/flutter (25006): HTTP request failed, statusCode: 404,
I/flutter (25006): http://192.168.43.106:3000/cupload%5C0157d41e-4db9-4d9a-9632-84c8a4cc15f1.png
I/flutter (25006): 
I/flutter (25006): When the exception was thrown, this was the stack:
I/flutter (25006): #0      NetworkImage._loadAsync (package:flutter/src/painting/_network_image_io.dart:90:9)
I/flutter (25006): <asynchronous suspension>
I/flutter (25006): #1      NetworkImage.load (package:flutter/src/painting/_network_image_io.dart:47:14)
I/flutter (25006): #2      ImageProvider.resolve.<anonymous closure>.<anonymous closure>.<anonymous closure> (package:flutter/src/painting/image_provider.dart:327:17)
I/flutter (25006): #3      ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:160:22)
I/flutter (25006): #4      ImageProvider.resolve.<anonymous closure>.<anonymous closure> (package:flutter/src/painting/image_provider.dart:325:84)

当我添加此代码时

print(snapshot.data[index]['img']);

在（ListView 中的 itemBuilder）里面是结果：

Restarted application in 1,428ms.
I/flutter (21905): http://192.168.43.106:3000/mo11111
I/flutter (21905): http://192.168.43.106:3000/m1
I/flutter (21905): http://192.168.43.106:3000/m11
I/flutter (21905): http://192.168.43.106:3000/m11
I/flutter (21905): http://192.168.43.106:3000/m1
I/flutter (21905): http://192.168.43.106:3000/m1
I/flutter (21905): http://192.168.43.106:3000/upload\500_F_216231494_oJFKyTVOUoiFMzvhhetAcSPktyZwhp7L.jpg
I/flutter (21905): http://192.168.43.106:3000/cupload\Capture.PNG
I/flutter (21905): http://192.168.43.106:3000/cupload\1_ir8j2Ag89QZFAKBZDZWEUw.png
I/flutter (21905): http://192.168.43.106:3000/cupload\0157d41e-4db9-4d9a-9632-84c8a4cc15f1.png
I/flutter (21905): http://192.168.43.106:3000/cupload\0157d41e-4db9-4d9a-9632-84c8a4cc15f1.png
I/flutter (21905): http://192.168.43.106:3000/cupload\download (1).jfif
I/flutter (21905): http://192.168.43.106:3000/cupload\0157d41e-4db9-4d9a-9632-84c8a4cc15f1.png
I/flutter (21905): http://192.168.43.106:3000/mo11111
I/flutter (21905): http://192.168.43.106:3000/m1
I/flutter (21905): http://192.168.43.106:3000/m11
I/flutter (21905): http://192.168.43.106:3000/m11
I/flutter (21905): http://192.168.43.106:3000/m1
I/flutter (21905): http://192.168.43.106:3000/m1
I/flutter (21905): http://192.168.43.106:3000/upload\500_F_216231494_oJFKyTVOUoiFMzvhhetAcSPktyZwhp7L.jpg
I/flutter (21905): http://192.168.43.106:3000/cupload\Capture.PNG
I/flutter (21905): http://192.168.43.106:3000/cupload\1_ir8j2Ag89QZFAKBZDZWEUw.png
I/flutter (21905): http://192.168.43.106:3000/cupload\0157d41e-4db9-4d9a-9632-84c8a4cc15f1.png
I/flutter (21905): http://192.168.43.106:3000/cupload\0157d41e-4db9-4d9a-9632-84c8a4cc15f1.png
I/flutter (21905): http://192.168.43.106:3000/cupload\download (1).jfif
I/flutter (21905): http://192.168.43.106:3000/cupload\0157d41e-4db9-4d9a-9632-84c8a4cc15f1.png

════════ Exception caught by image resource service ════════════════════════════════════════════════
The following NetworkImageLoadException was thrown resolving an image codec:
HTTP request failed, statusCode: 404, http://192.168.43.106:3000/cupload%5C0157d41e-4db9-4d9a-9632-84c8a4cc15f1.png

When the exception was thrown, this was the stack: 
#0      NetworkImage._loadAsync (package:flutter/src/painting/_network_image_io.dart:90:9)
<asynchronous suspension>
#1      NetworkImage.load (package:flutter/src/painting/_network_image_io.dart:47:14)
#2      ImageProvider.resolve.<anonymous closure>.<anonymous closure>.<anonymous closure> (package:flutter/src/painting/image_provider.dart:327:17)
#3      ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:160:22)
...
Image provider: NetworkImage("http://192.168.43.106:3000/cupload\0157d41e-4db9-4d9a-9632-84c8a4cc15f1.png", scale: 1.0)
Image key: NetworkImage("http://192.168.43.106:3000/cupload\0157d41e-4db9-4d9a-9632-84c8a4cc15f1.png", scale: 1.0)
════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter (21905): http://192.168.43.106:3000/mo11111
I/flutter (21905): http://192.168.43.106:3000/m1
I/flutter (21905): http://192.168.43.106:3000/m11
I/flutter (21905): http://192.168.43.106:3000/m11
I/flutter (21905): http://192.168.43.106:3000/m1
I/flutter (21905): http://192.168.43.106:3000/m1
I/flutter (21905): http://192.168.43.106:3000/upload\500_F_216231494_oJFKyTVOUoiFMzvhhetAcSPktyZwhp7L.jpg
I/flutter (21905): http://192.168.43.106:3000/cupload\Capture.PNG
I/flutter (21905): http://192.168.43.106:3000/cupload\1_ir8j2Ag89QZFAKBZDZWEUw.png
I/flutter (21905): http://192.168.43.106:3000/cupload\0157d41e-4db9-4d9a-9632-84c8a4cc15f1.png
I/flutter (21905): http://192.168.43.106:3000/cupload\0157d41e-4db9-4d9a-9632-84c8a4cc15f1.png
I/flutter (21905): http://192.168.43.106:3000/cupload\download (1).jfif
I/flutter (21905): http://192.168.43.106:3000/cupload\0157d41e-4db9-4d9a-9632-84c8a4cc15f1.png
D/ViewRootImpl@10bbcbe[MainActivity](21905): ViewPostIme pointer 0
D/ViewRootImpl@10bbcbe[MainActivity](21905): ViewPostIme pointer 1

编辑....... 我注意到一个问题，因为在浏览器中我得到了这个网址，例如：

http://192.168.43.106:3000/cupload//1_ir8j2Ag89QZFAKBZDZWEUw.png

但在颤振中是这样的：

http://192.168.43.106:3000/cupload%5C1_ir8j2Ag89QZFAKBZDZWEUw.png

(cupload) 之后有问题... 这是 node.js 中的代码

const storage2 = multer.diskStorage(
    destination: (req, file, cb)=>
   cb(null, 'cupload');
    ,

    filename: (req, file, cb)=>
        cb(null, file.originalname);
         
);
const filter2 = (req, file, cb)=>
    if(file.mimetype == "image/jpg" || file.mimetype == "image/jpeg" || file.mimetype == "image/png")
        cb(null, true)
    else
        cb(null, false);
    

const cupload = multer(
    storage: storage2,
    filter: filter2
);
app.post('/cat', cupload.single('img'));
app.use('/cupload', express.static('cupload'));

【问题讨论】：

你能检查一下你的listView你得到了什么。试着打印看看，你会得到一些东西print(snapshot.data[index]['img']) 是的，我说过，我得到了图片的url，当我粘贴这个url时，它是没有问题的， 您是否有机会打印snapshot.data 的值并用结果更新您的问题？ 我现在编辑了... 【参考方案1】：

请尝试使用r'snapshot.data[index]['img']' 作为图片网址

【讨论】：

以上是关于无法从 API 获取图像的主要内容，如果未能解决你的问题，请参考以下文章

颤振无法从 api 获取数据，dio 错误

无法正确设置下一个配置故事书以从 url 获取图像

使用新的 Instagram Graph API 获取帐户最新图像的凭据？

如何通过其 API 从 Instagram 获取用户图像

Amazon API 从产品中获取所有图像

从api获取图像作为字符串？到 UWP 应用程序