'How to insert firebase storage images inside firestore field

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),
            ),

Solution 1:^[1]

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.

Solution 2:^[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

Solution 3:^[3]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Doug Stevenson
Solution 2
Solution 3	Ethan

'How to insert firebase storage images inside firestore field

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]