Unable to load image from Firebase Storage using Flutter Image Network

Question

I created dummy list of items in my Firestore and stored an image in my storage.

Here's my code for reading the Image form child: ListView.separated(

              itemBuilder: (context, int index) {
                return ListTile(
                  leading: Image.network(
                    itemNotifier.itemList[index].imageURL),
                    width: 100.0,
                    height: 100.0,
                  ),
                  title: Text('${itemNotifier.itemList[index].name}'),
                  subtitle: Text(
                    '${itemNotifier.itemList[index].description}',
                    maxLines: 2,
                  ),
                  trailing: Text(
                    '${itemNotifier.itemList[index].price.toString()}',
                  ),
                );

The error I get when I try viewing this items List page is as below:

════════ Exception caught by image resource service ════════════════════════════════════════════════ The following NetworkImageLoadException was thrown resolving an image codec: HTTP request failed, statusCode: 404, http://(db-name).appspot.com/images/pablo-downloading.png

When the exception was thrown, this was the stack: #0 NetworkImage._loadAsync (package:flutter/src/painting/_network_image_io.dart:95:9) #1 NetworkImage.load (package:flutter/src/painting/_network_image_io.dart:48:14) #2 ImageProvider.resolveStreamForKey. (package:flutter/src/painting/image_provider.dart:501:13) #3 ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:359:22) ... Image provider: NetworkImage("http://(db-name).appspot.com/images/pablo-downloading.png", scale: 1.0) Image key: NetworkImage("http://(db-name).appspot.com/images/pablo-downloading.png", scale: 1.0) ════════════════════════════════════════════════════════════════════════════════════════════════════

What could I be missing here? Is it normal to have the String for the image url to start with "gs://"? Do I have to encode and decode for reads and writes each time?

Shashan Shashan · Accepted Answer · 2020-08-27T13:58:46

there are two urls generated for every image you upload to firebase storage

storage url (starting with gs://)
download url (starting with https://)

you need to use the download url

to get the download url in flutter you can refer the following block of code StorageReference

firebaseStorageRef=FirebaseStorage.instance.ref().child('fileName');   
var url = await firebaseStorageRef.getDownloadURL();

to get the download link from firebase storage UI console click on the image , a left dialog wil appear and right click on the blue underlined image name and click opean in new tab

reference https://stackoverflow.com/a/41767410/11330119

Unable to load image from Firebase Storage using Flutter Image Network

1 Answers