Baseflow / Baseflow/flutter_cached_network_image

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

Open
#968 0 comments 4 reactions 0 assignees View on GitHub
Dominant language
Dart
Stars
2.6k
Forks
731
Avg merge
3d 9h
Merged PRs (30d)
1

Description

## 🐛 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:**
- [ ] :iphone: iOS
- [ ] :robot: Android
- [X] 🖥️ Web

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.