How to load images from firebase storage?

I already succeed in uploading an image into firebase storage, now the problem is, how to load the images data.

so I have a collection containing an imagePath from the uploaded image. and so far I tried to make an image like a gridview.

this is all I’ve done,
productGrid.dart

 GridTile(
           ...
            child: FutureBuilder(
              future:
                  StorageService.getImage(context, productModelGrid!.assetpath),
              initialData: null,
              builder: (BuildContext context, AsyncSnapshot snapshot) {
                if (snapshot.hasData) {
                  return Text('hasdata');
                }
                return Text('nodata');
              },
            ),
          ),

storage.dart
is a file filled with a class of StorageService for upload and loading files from firebase storage

import 'dart:io';
import 'dart:typed_data';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:flutter/material.dart';

class StorageService {
  static UploadTask? uploadFile(String dest, File file) {
   ---
  }

  static UploadTask? uploadBytes(String dest, Uint8List file) {
...
  }

  static Future imageURL(BuildContext context, String filePath) async {
    return await FirebaseStorage.instance
        .ref()
        .child('files/productsImages/$filePath')
        .getDownloadURL();
  }

  static Future<Widget> getImage(BuildContext context, String theImage) async {
    late Image m;
    await imageURL(context, theImage).then((downloadURL) {
      m = Image.network(
        downloadURL.toString(),
        fit: BoxFit.cover,
      );
    });
    return m;
  }
}

after I Print and run a text inside a future builder, it said no data when snapshot has no data

return Text('nodata');

and getting this error from a debug console

error sending network request GET https://firebasestorage.googleapis.com/v0/b/last-order-263a0.appspot.com/o/files%2FproductsImages%2Ffiles%2FproductsImages%2Fjenis-roti-4.jpg2021-07-20%2016%3A34%3A09.790010

as far as I know, I already published a good rule for viewer and writer

match /{allPaths=**} {
    	allow read;
      allow write: if request.auth != null;
    }

please help, why I cannot showing any data?
hopefully, I could fill the Image.Network(snapshot.data);

Your generated link shows this:

{
  "error": {
    "code": 404,
    "message": "Not Found.  Could not get object",
    "status": "GET_OBJECT"
  }
}

Make sure that the path you are using to get the download URL is correct, verify this by opening the generated link in the browser.

as @sakina already noted

doesn’t look too good; there is a suspect path repetition files%2FproductsImages%2Ffiles%2FproductsImages plus the “/” characters are URL encoded as %2F.

hth

1 Like