使用 canvaskit 构建 Flutter Web:加载失败 Image.network()
Flutter web build with canvaskit: Failed to load Image.network()
我无法使用我域中的图像 URL,但我可以使用其他域(如 Facebook)中的图像 URL。错误是:
将来自 Whosebug 的图像 URL 放入 Image.network() 时也会发生这种情况。例如,尝试使用上图(Image.network('https://i.stack.imgur.com/o6lwE.png')
).
修复的基本方法是用HTML(flutter run -d chrome --web-renderer html
)渲染,但我需要使用toImage()函数,用HTML渲染不支持这个函数。所以我用 Canvaskit 渲染。
这个 link(https://docs.flutter.dev/development/platform-integration/web-images#host-your-images-in-a-cors-enabled-cdn) 可以帮助使用 Firebase 但我正在使用 Ubuntu 和 Apache 的人。
其实我想用HTML渲染,因为用Canvaskit渲染后遇到了很多问题
Render with HTML case: 如果有可以代替toImage()函数使用的函数,请告诉我。
使用 Canvaskit 渲染案例:如果您知道如何使用 Image.network() 显示图像 URL,请告诉我。
谢谢。
这个问题被Whosebug的自动系统关闭了,所以我删除它并创建一个新的。
2 天后,这就是我的发现。
- 使用
https://cors-anywhere.herokuapp.com/
或创建您的代理。
单击 https://cors-anywhere.herokuapp.com/ 并激活它。
您的图像小部件如下所示:
Image.network('https://cors-anywhere.herokuapp.com/$imageUrl')
- 使用 HtmlElementView(viewType: '$imageUrl').
- 在底部的 analysis_options.yaml 中添加这个。
analyzer:
errors:
undefined_prefixed_name: ignore
- 将这些导入您的 dart 文件。
import 'dart:html';
import 'dart:ui' as ui;
- 在
initState()
或 Widget build()
中添加这个,这必须在之前使用 - 您的图像小部件如下所示:
ui.platformViewRegistry.registerViewFactory(
$imageUrl,
(int viewId) => ImageElement()
..style.width = 'auto' //or '0%'-'100%'
..style.height = 'auto' //or '0%'-'100%'
..src = $imageUrl,
);
- 您的图像小部件如下所示:
HtmlElementView(viewType: $imageUrl)
- 使用.htaccess
- 通过在
<Directory /var/www/>
标签中打开 /etc/apache2/apache2.conf
激活 .htacess,将 AllowOverride None
更改为 AllowOverride All
。
- 您必须通过在控制台中键入这些来启用 mod_headers。
然后用
a2enmod headers
启用 mod_headers
使用 sudo service apache2 restart
. 重新启动 apache
- 在您的根目录中创建您的 .htaccess(对我来说,在 HTML 文件夹中)
- 允许 cross-origin 使用图像并 canvas 通过将其添加到 .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>
- 方法 1 修复起来简单快捷。但暂时可用且有限(https://github.com/Rob--W/cors-anywhere/issues/301)并且比其他方法慢,因为该应用程序必须与此 link 连接并且 link 将获取您的图像 URL 然后发送回到你的应用程序。如果我创建这样的网络,它会因为太多用户使用它而崩溃,对吗?
- 方法二适用于其他域的图片。但缺点是难以确定图像的宽高。需要检查哪条边的长度最长,设置这个
..style. *longest *
是'100%'
,短边是'auto'
。
- 方法 3 适用于在其域中使用图像的人。
如果有一个包可以完成像方法 2 这样的事情,那就太好了。
您可以在以下位置尝试您的 imageUrl:
https://flutter-test-exam-bug.web.app/#/Whosebug_72306043
我无法使用我域中的图像 URL,但我可以使用其他域(如 Facebook)中的图像 URL。错误是:
将来自 Whosebug 的图像 URL 放入 Image.network() 时也会发生这种情况。例如,尝试使用上图(Image.network('https://i.stack.imgur.com/o6lwE.png')
).
修复的基本方法是用HTML(flutter run -d chrome --web-renderer html
)渲染,但我需要使用toImage()函数,用HTML渲染不支持这个函数。所以我用 Canvaskit 渲染。
这个 link(https://docs.flutter.dev/development/platform-integration/web-images#host-your-images-in-a-cors-enabled-cdn) 可以帮助使用 Firebase 但我正在使用 Ubuntu 和 Apache 的人。
其实我想用HTML渲染,因为用Canvaskit渲染后遇到了很多问题
Render with HTML case: 如果有可以代替toImage()函数使用的函数,请告诉我。
使用 Canvaskit 渲染案例:如果您知道如何使用 Image.network() 显示图像 URL,请告诉我。
谢谢。
这个问题被Whosebug的自动系统关闭了,所以我删除它并创建一个新的。
2 天后,这就是我的发现。
- 使用
https://cors-anywhere.herokuapp.com/
或创建您的代理。
单击 https://cors-anywhere.herokuapp.com/ 并激活它。
您的图像小部件如下所示:
Image.network('https://cors-anywhere.herokuapp.com/$imageUrl')
- 使用 HtmlElementView(viewType: '$imageUrl').
- 在底部的 analysis_options.yaml 中添加这个。
analyzer:
errors:
undefined_prefixed_name: ignore
- 将这些导入您的 dart 文件。
import 'dart:html';
import 'dart:ui' as ui;
- 在
initState()
或Widget build()
中添加这个,这必须在之前使用 - 您的图像小部件如下所示:
ui.platformViewRegistry.registerViewFactory(
$imageUrl,
(int viewId) => ImageElement()
..style.width = 'auto' //or '0%'-'100%'
..style.height = 'auto' //or '0%'-'100%'
..src = $imageUrl,
);
- 您的图像小部件如下所示:
HtmlElementView(viewType: $imageUrl)
- 使用.htaccess
- 通过在
<Directory /var/www/>
标签中打开/etc/apache2/apache2.conf
激活 .htacess,将AllowOverride None
更改为AllowOverride All
。 - 您必须通过在控制台中键入这些来启用 mod_headers。
然后用
a2enmod headers
启用 mod_headers 使用sudo service apache2 restart
. 重新启动 apache
- 在您的根目录中创建您的 .htaccess(对我来说,在 HTML 文件夹中)
- 允许 cross-origin 使用图像并 canvas 通过将其添加到 .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>
- 方法 1 修复起来简单快捷。但暂时可用且有限(https://github.com/Rob--W/cors-anywhere/issues/301)并且比其他方法慢,因为该应用程序必须与此 link 连接并且 link 将获取您的图像 URL 然后发送回到你的应用程序。如果我创建这样的网络,它会因为太多用户使用它而崩溃,对吗?
- 方法二适用于其他域的图片。但缺点是难以确定图像的宽高。需要检查哪条边的长度最长,设置这个
..style. *longest *
是'100%'
,短边是'auto'
。 - 方法 3 适用于在其域中使用图像的人。
如果有一个包可以完成像方法 2 这样的事情,那就太好了。
您可以在以下位置尝试您的 imageUrl: https://flutter-test-exam-bug.web.app/#/Whosebug_72306043