1

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?

hermie_brown
  • 319
  • 9
  • 24

1 Answers1

4

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

  1. storage url (starting with gs://)
  2. 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 enter image description here

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

Shashan
  • 188
  • 1
  • 6
  • This is my current rules for storage. – hermie_brown Aug 27 '20 at 14:04
  • 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? – hermie_brown Aug 27 '20 at 14:12
  • how are you getting the image links from firebase storage in flutter to get image link you can use the following code snippet `StorageReference firebaseStorageRef =FirebaseStorage.instance.ref().child('fileName'); url = await firebaseStorageRef.getDownloadURL();` – Shashan Aug 27 '20 at 14:37
  • sample firebase storage image link https://firebasestorage.googleapis.com/b/bucket/o/images%20stars.jpg – Shashan Aug 27 '20 at 14:46
  • Here's my getter method that I use to read from DB. I also tried replacing the String url for my image with the link you sent above and it's still the same thing. getItems(ItemNotifier itemNotifier) async { QuerySnapshot snapshot = await itemCollection.getDocuments(); List _itemList = []; snapshot.documents.forEach((document) { Item item = Item.fromMap(document.data); _itemList.add(item); }); itemNotifier.itemList = _itemList; } – hermie_brown Aug 27 '20 at 15:11
  • I think the issue is with how my image is saved when I manually upload on Firestore. Instead of a http:// or https:// it starts with gs:///appspot.com/image.jpg Is this normal? Should I be using a special encoder/decoder to resolve this? – hermie_brown Aug 27 '20 at 15:17
  • i have edited my answer check it out, i hope it helps. The problem is you are using the storage link insted of download link, also the sample url which i gave was just to give an idea of how url formate looks like, the sample link is dead. – Shashan Aug 27 '20 at 17:58
  • my pleasure, keep coding glhf. – Shashan Aug 27 '20 at 19:23