Flutter Question posted in
The official Flutter documentation can be found here.

Firebase storage is not shows the image that linked in flutter

I am trying to show my image in the image widget in Flutter. It is so simple function. But I tried even too many things. It does not work. I opened a FirebaseStorage section and I activated it. I call my Firebase functions to download the URL. But The images is not showing in my widget. I tried break the firebase version in dart section. But It is not still working. How can I fix it?

Here is the my published image link: (It works in browser but not in flutter web app)
https://firebasestorage.googleapis.com/v0/b/commerce-fe056.appspot.com/o/mail.png?alt=media&token=6f57a585-25ae-44c9-ad12-15efea5d9163

Here is my version numbers:

 firebase_core: ^2.17.0
  cloud_firestore: ^4.9.3
  firebase_auth: ^4.10.1
  firebase_storage: ^11.5.5
  cached_network_image: ^3.3.1

Here is my function codes:

 @override
  void initState() {
    super.initState();
    // Set the initial value of imageUrl to an empty string
    imageUrl = '';
    imageUrl1 = '';
    //Retrieve the imge grom Firebase Storage
    getImageUrl();

  }


  Future<void> getImageUrl() async {
    // Get the reference to the image file in Firebase Storage
    final ref = storaged.ref().child("mail.png");
    final ref1 = storaged.ref().child("files/faild.png");
    // Get teh imageUrl to download URL
    final url = await ref.getDownloadURL();
    final url1 = await ref1.getDownloadURL();
    setState(() {
      imageUrl = url;
      imageUrl1 = url1;
    });
  }

Lastly, here is my widgets:

 CachedNetworkImage(
      imageUrl: imageUrl,
      placeholder: (context, url) => CircularProgressIndicator(),
      errorWidget: (context, url, error) => Icon(Icons.error),
    ),




    SizedBox(
        height: 300,
        child: Image(
          image: NetworkImage(imageUrl),
          fit: BoxFit.cover,
        )),
    Card(
      child: SizedBox(
          height: 300,
          child: Image(
            image: NetworkImage(imageUrl1 , ),
            fit: BoxFit.cover,
          )),
    ),

enter image description here

Also, You can check my console :

enter image description here

Tags:

2

Answers


  1. 0

    Take a look at the documentation on Displaying images on the web.

    Specifically, the CORS section:

    … it is designed such that, by default, one web-site is not allowed to make HTTP requests to another site using XHR or fetch. This prevents scripts on another site from acting on behalf of the user and from gaining access to another site’s resources without permission.

    One solution, as discussed, would be to use HTML renderer. So, run the project within the Terminal:

    flutter run -d chrome --web-renderer html // to run the app

flutter build web --web-renderer html --release // to generate a production build

    import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final imageUrl =
      'https://firebasestorage.googleapis.com/v0/b/commerce-fe056.appspot.com/o/mail.png?alt=media&token=6f57a585-25ae-44c9-ad12-15efea5d9163';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: Center(
          child: CachedNetworkImage(
            imageUrl: imageUrl,
            placeholder: (context, url) => CircularProgressIndicator(),
            errorWidget: (context, url, error) => Icon(Icons.error),
          ),
        ),
      ),
    );
  }
}

    enter image description here

    I’d recommend reading the above links that I have shared.

    Login or Signup to reply.
  2. 0

    Using HTML renderer as @MendelG suggested indeed mitigates the problem with CORS. However, HTML renderer is much worse in performance and it’s visible clearly in more complex screens that they don’t run in 60FPS.

    Since you’re managing your Firebase Storage, I recommend to set up the CORS settings properly, you can read more on that e.g. here: Firebase Storage and Access-Control-Allow-Origin

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search