Network Image Does Not Display Correct Image

Issue

I’m using NetowrkImage to display images from a URL, that does not include an image extension. I have also tried using Image.network but it gives a similar result.

File Server Behaviour

My server sends a placeholder image in response if the requested image is not available, and I am getting the placeholder image with the correct URL for the image.

Observation

When I open the URL in the browser it opens the correct image, and when I add an extension .jpeg to the end of URL, it displays the placeholder image in the browser.

Question

Does NetworkImage add an extension to the source URL?

Code

Image.network(
         inventory.image!.url!,
         fit: BoxFit.contain,
          )

I’m struggling to make it work.

Solution

As I stated in the question, the server responds with a placeholder image, if the request cannot be authenticated, that means the sessoin_id is not provided in the request header.

NetworkImage takes a parameter headers, and the custom HTTP interceptors won’t work becuase this widget is making its own HTTP request, so the session_id has to be provided there.

Image.network(
          imageUrl,
          headers: { */ Auth Params have to be added here*/ },
          fit: BoxFit.contain,
         )

If you are using Interceptors and do not want to pass headers separately to NetworkImage, you should use Image.memory widget and wrap it inside a FutureBuilder.
Create a future that calls the image URL and returns Uint8List.

FutureBuilder<Uint8List>(
      future: requestImageBytes,
      builder: (context, asyncSnapshot) {
            if (asyncSnapshot.connectionState ==
                         ConnectionState.waiting) {
                return Center(
                          child: CircularProgressIndicator();
                         );
                        }
                return Image.memory(
                         asyncSnapshot.data,
                         fit: BoxFit.contain,
                          );
                     })

See this GitHub issue .

Answered By – ASAD HAMEED

Answer Checked By – Marie Seifert (FlutterFixes Admin)