Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta
  • Qualcosa non va?
#1,007 4 commenti 9 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 4 giorni

Nessuno ha ancora preso questa issue.

Valutazione

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

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.

Descrizione

🐛 Bug Report

When compiled to wasm, images don't load the second time if navigated back and forth again, giving the below error:

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: 
    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:

  • 📱 iOS
  • 🤖 Android
  • 🕸️ Web
Additional Data
Sample Code 

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<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  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: (_) {},
        ),
      ),
    );
  }
}

Lingua principale
Dart
Stelle
2.6k
Fork
731
Merge medio
4g 12h
PR unite (30g)
2

Preparare l'ambiente

Non abbiamo ancora controllato i file di configurazione di questo progetto. Parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di Baseflow/flutter_cached_network_image

Tutte le issue di Baseflow/flutter_cached_network_image

Issue simili

Altre issue su Dart

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.