flutter-webflutter-imageflutter-canvas

Flutter web build with canvaskit: Failed to load Image.network()


I can't use the image URL from my domain but I can use the image URL from another domain like Facebook. The error is: enter image description here

enter image description here

It happened when putting the image URL from StackOverflow in the Image.network() too. For example, try using the picture above(Image.network('https://i.sstatic.net/o6lwE.png')).

The basic method for fixing is rendered with HTML(flutter run -d chrome --web-renderer html) but I need to use the toImage() function and rendering with HTML doesn't support this function. So I render with Canvaskit.

This link(https://docs.flutter.dev/development/platform-integration/web-images#host-your-images-in-a-cors-enabled-cdn) can help someone who is using the Firebase but I am using the Ubuntu with the Apache.

Actually, I want to render with HTML because after rendering with Canvaskit I encountered a lot of problems.

Render with HTML case: If there is a function that can be used instead of the toImage() function, please tell me.

Render with Canvaskit case: If you know how to display the image URL with Image.network(), please tell me.

Thank you.


Solution

  • This question was closed by the auto system of StackOverflow, So I delete it and create a new one.

    After 2 days, that's what I found.

    1. Use https://cors-anywhere.herokuapp.com/ or create your proxy.
    1. Use HtmlElementView(viewType: '$imageUrl').
    analyzer:
      errors:
        undefined_prefixed_name: ignore
    
    import 'dart:html';
    import 'dart:ui' as ui;
    
    ui.platformViewRegistry.registerViewFactory(
          $imageUrl,
          (int viewId) => ImageElement()
            ..style.width = 'auto' //or '0%'-'100%'
            ..style.height = 'auto' //or '0%'-'100%'
            ..src = $imageUrl,
        );
    
    HtmlElementView(viewType: $imageUrl)
    
    1. Use .htaccess
    <IfModule mod_setenvif.c>
      <IfModule mod_headers.c>
        <FilesMatch "\.(avifs?|bmp|cur|gif|ico|jpe?g|jxl|a?png|svgz?|webp)$">
          SetEnvIf Origin ":" IS_CORS
          Header set Access-Control-Allow-Origin "*" env=IS_CORS
        </FilesMatch>
      </IfModule>
    </IfModule>
    

    In my opinion:

    It would be nice to have a package that completes things like method 2.

    You can try your imageUrl at: https://flutter-test-exam-bug.web.app/#/stackoverflow_72306043

    For testing on the local side for the Flutter web (Canvaskit), follow this