It appears as a black image somebody help me

[isJihan]

CachedNetworkImage(imageUrl: afterImageURL!)

This is my code. afterImageURL,
afterImageURL receives the value from API.
However, under the same conditions, only certain images intermittently appear on a black image.
The URL address is not wrong, and the image appears properly on the network.
Even if it is displayed as an errorWidget, it does not appear as an errorWidget and is a black image.
I am using cached_network_image: ^3.3.1 and flutter version is 3.16.7.
somebody help me....

[isJihan]

[ksokolovskyi-yc]

Hi @isJihan, it looks like there is an issue in Flutter: flutter/flutter#151273

[slowlydeveloped]

Hi @isJihan, it looks like there is an issue in Flutter: flutter/flutter#151273

it looks, this issue is of flutter itself. @isJihan did you find any solutions to this??

[ksokolovskyi-yc]

Hi @isJihan, it looks like there is an issue in Flutter: flutter/flutter#151273

it looks, this issue is of flutter itself. @isJihan did you find any solutions to this??

I was able to fix the issue. The issue is in the image itself. If you have access to the place where it is stored, then use https://tinyjpg.com/ service, do the minimum compression, and update the image. It worked for me.

[isJihan]

Hi @isJihan, it looks like there is an issue in Flutter: flutter/flutter#151273

it looks, this issue is of flutter itself. @isJihan did you find any solutions to this??

not yet...

[isJihan]

I was able to fix the issue. The issue is in the image itself. If you have access to the place where it is stored, then use https://tinyjpg.com/ service, do the minimum compression, and update the image. It worked for me.

I have an internal network version that produces the same image correctly. Therefore, it doesn't seem to be a problem with the image itself. In my external network version, only a few specific images appear in black like that, and the rest appear properly.

The internal network version of Flutter is 2.5.0.

[ksokolovskyi-yc]

I was able to fix the issue. The issue is in the image itself. If you have access to the place where it is stored, then use https://tinyjpg.com/ service, do the minimum compression, and update the image. It worked for me.

I have an internal network version that produces the same image correctly. Therefore, it doesn't seem to be a problem with the image itself. In my external network version, only a few specific images appear in black like that, and the rest appear properly.

The internal network version of Flutter is 2.5.0.

Could you please share at least one link to an image that appears in black?

[slowlydeveloped]

The issue only appears with jpeg or any other image format?? because the issue mentioned in the chat shows it only to be related with jpeg.

[ksokolovskyi-yc]

The issue only appears with jpeg or any other image format?? because the issue mentioned in the chat shows it only to be related with jpeg.

I noticed this issue only in JPEG images.

[ksokolovskyi-yc]

Could you please share at least one link to an image that appears in black?

https://ext.daeguro.co.kr:45010/request-images/MenuImage/20240628/22000/202406280312003664_300.jpg

Thanks a lot for sharing the image!

I noticed that the issue happens only on Chromium-based browsers when using CanvasKit renderer. Here is a small demo that shows how to fix the issue:

Chrome	Safari

Source code

import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text('Original:'),
              Image.asset(
                'assets/original.jpg',
                height: 100,
                width: 100,
              ),
              const SizedBox(height: 10),
              const Text('After tinyjpg.com:'),
              Image.asset(
                'assets/edited.jpg',
                height: 100,
                width: 100,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Images

Original	Edited

[isJihan]

Chromium-based browsers

But why do images received through the same API appear correctly on a website created with Flutter 2.5.0-1 version? without use https://tinyjpg.com/??

[ksokolovskyi-yc]

Chromium-based browsers

But why do images received through the same API appear correctly on a website created with Flutter 2.5.0-1 version? without use https://tinyjpg.com/??

Honestly, I don't know. Which renderer is used in that web application: CanvasKit or HTML?

[isJihan]

Honestly, I don't know. Which renderer is used in that web application: CanvasKit or HTML?

both web application are CanvasKit.
When rendered in html, the image is visible in version 3.16.7.

[slowlydeveloped]

Honestly, I don't know. Which renderer is used in that web application: CanvasKit or HTML?

both web application are CanvasKit. When rendered in html, the image is visible in version 3.16.7.

<script src="main.dart.js" type="application/javascript" data-entrypoint="web_entrypoint.dart" data-renderer="html"></script>

Is this how we change the renderer to html from canvaskit. if yes, then it is still not loading. and if no, please tell me the correct way. Thank you

[ksokolovskyi-yc]

Honestly, I don't know. Which renderer is used in that web application: CanvasKit or HTML?

both web application are CanvasKit. When rendered in html, the image is visible in version 3.16.7.

<script src="main.dart.js" type="application/javascript" data-entrypoint="web_entrypoint.dart" data-renderer="html"></script>

Is this how we change the renderer to html from canvaskit. if yes, then it is still not loading. and if no, please tell me the correct way. Thank you

Hi @slowlydeveloped!
By providing the --web-renderer parameter, you can select the renderer when building the Flutter web app.
For the details, please check the Flutter docs: https://docs.flutter.dev/platform-integration/web/renderers#command-line-options

[martipello]

We had this same error recently in our flutter app only on web and only on Chromium browsers it turned out to be an issue with Chrome not recognising that the image is different if you change the image by 1 pixel it will fix it