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:
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.
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.
https://cors-anywhere.herokuapp.com/
or create your proxy.click https://cors-anywhere.herokuapp.com/ and activate it.
Your image widget looks like this:
Image.network('https://cors-anywhere.herokuapp.com/$imageUrl')
analyzer:
errors:
undefined_prefixed_name: ignore
import 'dart:html';
import 'dart:ui' as ui;
initState()
or Widget build()
, this has to use before - Your image widget looks like this:ui.platformViewRegistry.registerViewFactory(
$imageUrl,
(int viewId) => ImageElement()
..style.width = 'auto' //or '0%'-'100%'
..style.height = 'auto' //or '0%'-'100%'
..src = $imageUrl,
);
HtmlElementView(viewType: $imageUrl)
/etc/apache2/apache2.conf
in <Directory /var/www/>
tag, change AllowOverride None
to AllowOverride All
.a2enmod headers
then
restart apache with sudo service apache2 restart
.<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:
..style. *longest *
is '100%'
and the shorter side is 'auto'
.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