Firebase storage doesn't show the image that's linked in Flutter Web

Question

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

Also, You can check my console :

Answer 1

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

---

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