Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
  • Có gì không ổn?
#1,007 4 bình luận 9 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
35/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
dart, flutter, wasm
Lĩnh vực
web-dev

Hướng nghiên cứu

Tái hiện sự cố bằng ví dụ trong lib/main.dart và chạy bằng flutter run -d chrome --wasm. So sánh chuỗi điều hướng khi có và không có errorListener; hoàn tất khi hình ảnh tải lại sau khi quay lại và mở lại trang mà không cung cấp errorListener.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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

Ngôn ngữ chính
Dart
Star
2.6k
Fork
734
Merge trung bình
3 ngày 10 giờ
Pull request đã merge (30 ngày)
14

Chuẩn bị môi trường

  • Không có Dockerfile hay tệp Docker Compose
  • Có mẫu pull request
  • Không có hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của Baseflow/flutter_cached_network_image

Tất cả issue của Baseflow/flutter_cached_network_image

Issue tương tự

Thêm issue về Dart

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.