Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#1,007 4 comentarios 9 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 4 días

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
dart, flutter, wasm
Área
web-dev

Línea de trabajo

Reproduce el problema usando el ejemplo de lib/main.dart y ejecútalo con flutter run -d chrome --wasm. Compara la secuencia de navegación con y sin errorListener; se considera terminado cuando la imagen vuelve a cargarse después de regresar y volver a abrir la página sin proporcionar errorListener.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
Dart
Estrellas
2.6k
Forks
731
Merge medio
4 d 12 h
PR fusionados (30 d)
2

Preparar el entorno

Aún no hemos revisado los archivos de configuración de este proyecto. Empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de Baseflow/flutter_cached_network_image

Todos los issues de Baseflow/flutter_cached_network_image

Issues similares

Más issues de Dart

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.