Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Firebase Storage + Flutter Web] Failed to detect image file format using the file header #968

Open
1 of 3 tasks
Kuhlemann opened this issue Aug 31, 2024 · 0 comments
Open
1 of 3 tasks

Comments

@Kuhlemann
Copy link

Kuhlemann commented Aug 31, 2024

🐛 Bug Report

When I try to load an image with "CachedNetworkImage()" I get the following error and the image can't be visualized:

ImageCodecException: Failed to detect image file format using the file header.
File header was [0x3c 0x21 0x44 0x4f 0x43 0x54 0x59 0x50 0x45 0x20].
Image source: http://localhost:49430/Shop/hHtD0QEuS2NkzWvSTUOZ/computer2.png

  • The problem only appears in Flutter Web with relative URIs from Firebase Storage (fileService: FirebaseHttpFileService() is used).
  • The same code works for iOS/Android.
  • In the console of Firebase Storage I see that the image has the correct MIME-type "image/jpeg".
  • All images which I tested (.png / .jpeg) have this problem.
  • Using -web-renderer html doesn't solve the problem.
  • If I use CachedNetworkImage() for the same picture from Firebase Storage with a fully qualified https-URL (instead of using FirebaseHttpFileService) then the picture is visualized correctly in Flutter Web.

Expected behavior

CachedNetworkImage should be able to visualize Firebase Storage pictures when using fileService: FirebaseHttpFileService() with relative paths.

Reproduction steps

CachedNetworkImage(
                  imageUrl: 'Shop/hHtD0QEuS2NkzWvSTUOZ/computer2.png',
                  placeholder: (context, url) => Center(child: customCircularProgressIndicator()),
                  errorWidget: (context, url, error) {
                    print(error);
                    return const Icon(Icons.close, color: MyColors.error);
                  },
                  cacheManager: CustomCacheManager(),
                ),

"imageUrl" is a relative path inside Firebase Storage.

class CustomCacheManager extends CacheManager {
  static const key = CKeys.customCacheManagerKey;

  static final CustomCacheManager _instance = CustomCacheManager._internal();

  CustomCacheManager._internal()
      : super(
          Config(
            key,
            stalePeriod: const Duration(days: 1),
            fileService: FirebaseHttpFileService(),
          ),
        );

  factory CustomCacheManager() {
    return _instance;
  }
}

Configuration

Version:
cached_network_image: 3.4.0
flutter_cache_manager_firebase: 2.1.1

Platform:

  • 📱 iOS
  • 🤖 Android
  • 🖥️ Web
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant