Flutter Web not showing images . Giving EncodingError: The source image cannot be decoded

Question

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?

Answer 1

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!