How to insert firebase storage images inside firestore field

Question

I have a problem in my flutter app , and the problem is in the storage of firebase . I have a collection with field called avatar(String). It's value comes from an image link , so first i uploaded the images to firebase storage and i changed the rules to allow read . so when i refresh the code i get this error.

═══════ Exception caught by image resource service ════════════════════════════════════════════════

The following ArgumentError was thrown resolving an image

codec:
Invalid argument(s): Unsupported scheme 'gs' in URI gs://pfe-2020-51d9c.appspot.com/Asperge/asperges%20(1).jpg

When the exception was thrown, this was the stack:

#0      _HttpClient._openUrl (dart:_http/http_impl.dart:2278:9)
#1      _HttpClient.getUrl (dart:_http/http_impl.dart:2197:48)
#2      NetworkImage._loadAsync (package:flutter/src/painting/_network_image_io.dart:84:59)
#3      NetworkImage.load (package:flutter/src/painting/_network_image_io.dart:47:14)
#4      ImageProvider.resolve.<anonymous closure>.<anonymous closure>.<anonymous closure> (package:flutter/src/painting/image_provider.dart:327:17)

... Image provider: NetworkImage("gs://pfe-2020-51d9c.appspot.com/Asperge/asperges (1).jpg", scale: 1.0) Image key: NetworkImage("gs://pfe-2020-51d9c.appspot.com/Asperge/asperges (1).jpg", scale: 1.0) ════════════════════════════════════════════════════════════════════════════════════════════════════

And this is my dart code

===================================================================================================

 ClipRRect(
            child: Image.network(snapshot.data[index].data['avatar'],
            height: 100,
            width: 170,
            fit: BoxFit.fill,
            ),
               borderRadius: BorderRadius.circular(20),
            ),

score 2 · Answer 1 · answered Mar 02 '20 at 20:54

2

Flutter doesn't know how to deal with the URLs that Cloud Storage uses natively to describe the location of an uploaded file. That "gs://" indicates a custom scheme used by Cloud Storage. What you will need to do is provide a URL that Flutter does understand.

You can get an HTTPS download URL from an uploaded file by using getDownloadUrl(). That's the URL you should feed to Flutter to download and display the image.

answered Mar 02 '20 at 20:54

Doug Stevenson

297,357
32
422
441

1

i didn't get it , how can i implements the getDowloadUrl() in my code here is my code: ClipRRect( child: Image.network(snapshot.data[index].data['avatar'], height: 100, fit: BoxFit.fill, ), ), – Braken Mohamed Mar 02 '20 at 21:08
you can make it a method that you call on I suppose – MwBakker Jan 08 '21 at 12:53

Majdi Zlitni · Accepted Answer · 2022-03-28T20:04:09.070

2

You can change the Google Storage (which start with gs://) to download URL (which start with https://) You can find it under Firebase storage-> File location-> Access token

 ClipRRect(
        child: Image.network(snapshot.data?.docs[index]["Your_firebase_field"],
        height: 100,
        width: 170,
        fit: BoxFit.fill,
        ),
           borderRadius: BorderRadius.circular(20),
        ),

I used This as a reference

edited Mar 28 '22 at 20:04

answered Mar 24 '22 at 02:10

Majdi Zlitni

46
1
6

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 24 '22 at 07:17
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/31362315) – Ethan Mar 28 '22 at 15:02

score 0 · Answer 3 · edited May 02 '22 at 05:18

0

Open the image you stored in your storage on the browser. There is an open icon right under the image name.

Then copy the URL of the image from the newly opened tab and replace it on your database where you had the "gs://..." value, which I think is the avatar value.

edited May 02 '22 at 05:18

Ethan

876
8
18
34

answered Apr 30 '22 at 13:05

Itis Me

39
5

How to insert firebase storage images inside firestore field

3 Answers3