I am using Flutter web for my application. I used --web-renderer html previously but now I have updated Flutter which no longer supports web-rendering flags.

This is how my code looks like.

  CachedNetworkImage(
      imageUrl: imageUrl,
      height: height,
      width: width,
      fit: BoxFit.cover,
      placeholder: (context, url) => Container(
        color: Colors.grey[300], // Placeholder color
        height: height,
        width: width,
        child: Center(child: CircularProgressIndicator()),
      ),
      errorWidget: (context, url, error) { 
        debugPrint("$error");
        debugPrint("$url");
        return Container(
        color: Colors.grey[300], // Background color if error occurs
        height: height,
        width: width,
        child: const Icon(Icons.error, color: Colors.red),
      );},
    ),

When I print the error, it shows EncodingError: The source image cannot be decoded.

The url is also correct and works fine in browser. Images are stored in Firebase storage

All results in Stackoverflow are talking about web renderer and base64 encoding, which I dont think is the issue here.

Any suggestions or help?

I am using Flutter web for my application. I used --web-renderer html previously but now I have updated Flutter which no longer supports web-rendering flags.

This is how my code looks like.

  CachedNetworkImage(
      imageUrl: imageUrl,
      height: height,
      width: width,
      fit: BoxFit.cover,
      placeholder: (context, url) => Container(
        color: Colors.grey[300], // Placeholder color
        height: height,
        width: width,
        child: Center(child: CircularProgressIndicator()),
      ),
      errorWidget: (context, url, error) { 
        debugPrint("$error");
        debugPrint("$url");
        return Container(
        color: Colors.grey[300], // Background color if error occurs
        height: height,
        width: width,
        child: const Icon(Icons.error, color: Colors.red),
      );},
    ),

When I print the error, it shows EncodingError: The source image cannot be decoded.

The url is also correct and works fine in browser. Images are stored in Firebase storage

All results in Stackoverflow are talking about web renderer and base64 encoding, which I dont think is the issue here.

Any suggestions or help?

• flutter
• firebase
• firebase-storage

• what type of image is it? keep in mind that flutter can only support a limited number of image formats, the Image widget docs say: '''the following image formats are supported: JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, and WBMP''' – pskink Commented Mar 6 at 11:34
• @pskink its PNG name.png?alt=media – Zee A Commented Mar 6 at 11:37
• what are the first 8-12 bytes (in hex) of that png? is it 89 50 4E 47 0D 0A 1A 0A ? – pskink Commented Mar 6 at 11:39
• @pskink 89 50 4E 47 0D 0A 1A 0A 00 00 00 0D – Zee A Commented Mar 6 at 11:53
• hmmm, looks ok, tried to download it locally and just for test use Image.file / Image.asset ? – pskink Commented Mar 6 at 11:57

2 Answers 2

This isn't encoding issue. As from the comments below your question, it looks like CORS for your Firebase bucket has not been set.

1. Go to Project Settings in Firebase
2. Click "Service Accounts"
3. Click on link "Manage service account permissions" (this will take you to Google Cloud Console)
4. Click "CloudShell" icon on the top menu

Once CloudShell starts, run the following command (Use your bucket address from Firebase where your images are stored)

gsutil cors get gs://your-project.firebasestorage.app

Restart your application and it should work!

If you haven't setup CORS in your firebase console, Follow these steps :

1. Go to Project Settings in Firebase

2. Click "Service Accounts"

3. Click on link "Manage service account permissions" (this will take you to Google Cloud Console)

4. Click "CloudShell" icon on the top menu

   Once CloudShell starts, run the following command (Use your bucket address from Firebase where your images are stored)

5. echo '[{"origin": ["*"],"responseHeader": ["Content-Type"],"method": ["GET", "HEAD"],"maxAgeSeconds": 3600}]' > cors-config.json
   

6. Apply the CORS Configuration to Your Storage Bucket

   1. Replace YOUR_BUCKET_NAME with your actual bucket name. You can find your bucket name in the Firebase Console under Storage.

   2. Copy the bucket name in the format gs://your-bucket-name.

   3. Execute the following command in the Cloud Shell terminal to apply the CORS configuration: gsutil cors set cors-config.json gs://YOUR_BUCKET_NAME

7. Verify the CORS Configuration

   1. To check if the CORS settings were applied correctly, run the following command: gsutil cors get gs://YOUR_BUCKET_NAME

   https://codingwitht/how-to-view-cloud-images-in-flutter-web-enable-cors/