Question

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

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

此网址（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

编辑....... 我注意到一个问题，因为在浏览器中我得到了以下URL：

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

但是像这样：

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

（杯装）后出现问题... 这是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'));

Answer 1

请尝试使用r'snapshot.data[index]['img']'作为图像URL

无法从API获取图像

1 个答案: