Exception caught by image resource service: The following ProgressEvent$ object was thrown resolving an image codec: [object ProgressEvent]

Question

I am getting this error in my flutter app. I am trying to show an image stored in my backend/public/temp by using Multer the image is being stored well

but when i try to use it in frontend by using Network.Image it gives this exception.

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]

When the exception was thrown, this was the stack

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

The NetworkImage widget makes a GET request on the url provided in order to fetch the image. Your backend server, however, is not serving this image.

The Problem

According to source url provided here: http://localhost:3000/public/temp/avatar-1720196147993-406008225.jpg the backend should essentially have a request handler for the endpoint /public/temp/avatar-1720196147993-406008225.jpg where it receives a GET request, and sends back the image in response along with the appropriate headers.

The Solution

An easy way you could implement this is by using express.static middleware of the express module being used for your node server.

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

In accordance to the above code, all your images stored in the public folder will be served.

For example:

If you have an image /public/temp/sample.jpg, the image will be served on http://localhost:3000/temp/sample.jpg