Baseflow / Baseflow/flutter_cached_network_image

Images fails to load the second time on web when compiled to wasm

Aperta
#1,007 4 commenti 9 reazioni 0 assegnatari Vedi su GitHub
Lingua principale
Dart
Stelle
2.6k
Fork
731
Merge medio
3g 9h
PR unite (30g)
1

Descrizione

## 🐛 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: (_) {},
),
),
);
}
}

```


Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Direzione di ricerca

Riproduci il problema usando l’esempio in lib/main.dart ed eseguilo con flutter run -d chrome --wasm. Confronta la sequenza di navigazione con e senza errorListener; è completato quando l’immagine viene caricata nuovamente dopo essere tornati indietro e aver riaperto la pagina senza fornire errorListener.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
dart, flutter, wasm
Ambito
web-dev
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.