图像资源服务捕获异常：解析图像编解码器时抛出以下 ProgressEvent$ 对象：[object ProgressEvent]

Question

我在我的 flutter 应用程序中收到此错误。我正在尝试使用 Multer 显示存储在我的后端/公共/临时中的图像，图像存储得很好

但是当我尝试通过使用 Network.Image 在前端使用它时，它给出了这个异常。

CircleAvatar(

        backgroundImage: userData != null &&
                userData!['user']['avatar'] != null
            ? NetworkImage(baseUrl +
                userData!['user']['avatar'].replaceAll("\\", "/"))
            : AssetImage('assets/logo/cat.jpeg') as ImageProvider,
        minRadius: 20,
        maxRadius: 40,
      ),

══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
The following ProgressEvent$ object was thrown resolving an image codec:
  [object ProgressEvent]

抛出异常时，这就是堆栈

Image provider: NetworkImage("http://localhost:3000/public/temp/avatar-1720196147993-406008225.jpg",
  scale: 1.0)
Image key: NetworkImage("http://localhost:3000/public/temp/avatar-1720196147993-406008225.jpg",
  scale: 1.0)
════════════════════════════════════════════════════════════════════════════════════════════════════
Error
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 294:3       throw_
packages/flutter/src/painting/_network_image_web.dart 146:11                      <fn>
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 574:37  _checkAndCall
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 579:39  dcall

Answer 1

NetworkImage

小部件对提供的 url 发出 GET 请求以获取图像。 但是，您的后端服务器不提供此图像。

问题

根据此处提供的源网址：

http://localhost:3000/public/temp/avatar-1720196147993-406008225.jpg

后端本质上应该有一个用于端点

/public/temp/avatar-1720196147993-406008225.jpg

的请求处理程序，它在其中接收 GET 请求，并发送回图像作为响应以及适当的标头。

解决方案

实现此目的的一种简单方法是使用用于节点服务器的

express.static

模块的

express

中间件。

var path = require('path');
var express = require('express');
var app = express();

app.use(express.static('public'));


app.get('/', function (req, res) {
     res.send(200, {
            "message": "Hello World"
     });
});

app.listen(3000, function () {
     console.log('Listening on http://localhost:3000/');
});

按照上面的代码，您存储在

public

文件夹中的所有图像都将被提供。

例如：

如果您有图像

/public/temp/sample.jpg

， 该图像将在

http://localhost:3000/temp/sample.jpg

上提供