Baseflow / Baseflow/flutter_cached_network_image
Images fails to load the second time on web when compiled to wasm
- Dominant language
- Dart
- Stars
- 2.6k
- Forks
- 731
- Avg merge
- 3d 9h
- Merged PRs (30d)
- 1
Description
## 🐛 Bug Report
When compiled to wasm, images don't load the second time if navigated back and forth again, giving the below error:
```logs
ImageCodecException: Failed to decode image using the browser's ImageDecoder API.
Image source: https://docs.flutter.dev/assets/images/dash/dash-fainting.gif
Original browser error: JavaScriptError
```
But, if you provide the `errorListener` param some value, this error mysteriously fixes.
### Expected behavior
Images should load every time without giving any errors even if `errorListener` is not provided.
### Reproduction steps
1. Copy below sample code into `lib/main.dart`
2. Run on web with **wasm** using the below command:
```bash
flutter run -d chrome --wasm
```
3. Click on `Open Page 1` button and wait for the image to load
4. Click back and wait 5 seconds
5. Once again click `Open Page 1` button
6. See image loading error
7. Now uncomment the `errorListener` line in **sample code**
8. Enter `r` in terminal to hot restart
9. Repeat steps 3-5
10. See the error is fixed magically
### Configuration
**Version:** 3.4.1
**Platform:**
- [ ] :iphone: iOS
- [ ] :robot: Android
- [x] :spider_web: Web
### Additional Data
Sample Code
```dart
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
void main() => runApp(const MyApp());
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State createState() => _MyAppState();
}
class _MyAppState extends State {
final _urls = [
'https://docs.flutter.dev/assets/images/dash/dash-fainting.gif',
'https://picsum.photos/250?image=2',
];
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Web Images',
home: Builder(
builder: (context) {
return Scaffold(
appBar: AppBar(title: Text('Web Images')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () => _onPressed(context, 0),
child: Text('Open Page 1'),
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () => _onPressed(context, 1),
child: Text('Open Page 2'),
),
],
),
),
);
},
),
);
}
void _onPressed(BuildContext context, int index) {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => NewWidget(url: _urls[index])),
);
}
}
class NewWidget extends StatelessWidget {
const NewWidget({super.key, required this.url});
final String url;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: CachedNetworkImage(
imageUrl: url,
placeholder: (_, _) => CircularProgressIndicator.adaptive(),
// ! Uncomment the line below to see magic
// errorListener: (_) {},
),
),
);
}
}
```
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.