使用Canvaskit flutter Web构建：无法加载image.network（）

发布于 2025-01-30 16:41:13 字数 1154 浏览 3 评论 0原文

我无法使用来自域中的图像URL，但是可以使用像Facebook这样的另一个域中的图像URL。错误是：

当将image.network（）中的stackoverflow放置图像URL时，它也会发生。例如，尝试使用上面的图片（image.network（'https://i.sstatic.net/o6lwe.png'））。

使用HTML（flutter Run -d Chrome -web -Renderer HTML）渲染了修复的基本方法，但我需要使用toimage（）函数并使用HTML渲染不支持此功能。所以我用拿桌渲染。

此链接（ https://docs.flutter.dev/development/platform-integration/web-images#host-your-images-images-in-a-cors-enabled-cdn ）可以帮助使用firebase的人，但我我正在将Ubuntu与Apache一起使用。

实际上，我想使用HTML渲染，因为在使用Canvaskit渲染后，我遇到了很多问题。

使用HTML情况渲染：如果可以使用一个函数代替toimage（）函数，请告诉我。

使用Canvaskit情况渲染：如果您知道如何使用image.network（）显示图像URL，请告诉我。

谢谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

寒江雪… 2025-02-06 16:41:13

这个问题是由stackoverflow的自动系统关闭的，因此我将其删除并创建一个新的问题。

两天后，这就是我发现的。

使用https://cors-anywhere.herokuapp.com/或创建代理。

单击 https：//cors-anywhere.herokuapp.com/ 并激活它。<<<<<<<<<<<<<<<<<<<<<<<< /p>
您的图像小部件看起来像这样：
image.network（'https://cors-anywhere.herokuapp.com/jumageurl'）

使用htmlelementview（viewTypeepe：'$ imageurl'）。

将其添加到Analysis_options.yaml中。

analyzer:
  errors:
    undefined_prefixed_name: ignore

将这些导入您的飞镖文件。

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

＆lt; directory/directory/var/www/www/＆gt;标签激活的.htacess by Open /etc/apache2/apache2/apache2.conf到AllowOverride所有。
您必须通过在控制台中键入它们来启用mod_headers。
使用a2enmod标头启用mod_headers然后
使用sudo服务apache2 restart重新启动apache。
创建您的.htaccess在您的根（对我，在HTML文件夹中）创建您的.htaccess，
从而通过在.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-inywhere/dessove/301 ）且比其他方法慢，因为该应用必须与此链接连接，并且该链接将获取您的映像URL，然后将其发送回您的应用程序。如果我创建的网络看起来像这样，它将破裂，因为用户太多使用，对吗？
方法2适用于其他域上的图像。但是缺点是很难确定图像的宽度和高度。有必要检查哪个侧长是最长的设置此..样式。 *最长 *是'100％'，较短的侧面是'auto'。
方法3适用于在域上使用图像的人。

拥有一个完成方法2之类的软件包会很高兴。

您可以尝试以下位置。
https://flutter-test-test-exam-exam-bug.web.web.app/#/ stackoverflow_72306043

用于在本地方面进行测试 flutter web（Canvaskit），请关注

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.

Use 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')

Use HtmlElementView(viewType: '$imageUrl').

Add this in analysis_options.yaml at the bottom.

analyzer:
  errors:
    undefined_prefixed_name: ignore

Import these in your dart file.

import 'dart:html';
import 'dart:ui' as ui;

Add this in the 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,
    );

Your image widget looks like this:

HtmlElementView(viewType: $imageUrl)

Use .htaccess

Activated .htacess by open /etc/apache2/apache2.conf in <Directory /var/www/> tag, change AllowOverride None to AllowOverride All.
You have to enable mod_headers by typing these in the console.
Enable mod_headers with a2enmod headers then
restart apache with sudo service apache2 restart.
Create your .htaccess in your root(For me, in the HTML folder)
Allowing cross-origin use of images and canvas by adding this in the .htaccess file.

<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    <FilesMatch "\.(avifs?|bmp|cur|gif|ico|jpe?g|jxl|a?png|svgz?|webp)quot;>
      SetEnvIf Origin ":" IS_CORS
      Header set Access-Control-Allow-Origin "*" env=IS_CORS
    </FilesMatch>
  </IfModule>
</IfModule>

In my opinion:

Method 1 is easy and quick to fix. but temporarily available and limited (https://github.com/Rob--W/cors-anywhere/issues/301) and slower than other methods because the app has to connect with this link and the link will get your image URL and then send it back to your app. If I create the web looks like this, it will break because too many users use it, right?
Method 2 is suitable for images that are on other domains. But the disadvantage is that it is difficult to determine the width and height of the image. It is necessary to check which side length is the longest to set this ..style. *longest * is '100%' and the shorter side is 'auto'.
Method 3 is suitable for people who use images on their domain.

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

回复收藏 0 原文

走过海棠暮 2025-02-06 16:41:13

我正在为Web使用Canvaskit渲染。当试图通过URL显示图像时：

Image.network(banner.imageUrl)

我得到错误：抛出了另一个例外：[object progressevent]

我解决了来自pub.dev的软件包的问题： image_network

我的解决方案：

import 'package:flutter/material.dart';
import 'package:image_network/image_network.dart';

/// Supports canvaskit rendering for web.
class AppNetworkImage extends StatelessWidget {
  final String imageUrl;

  const AppNetworkImage({
    super.key,
    required this.imageUrl,
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        return ImageNetwork(
          image: imageUrl,
          height: constraints.maxHeight,
          width: constraints.maxWidth,
          duration: 100,
          onPointer: true,
          onLoading: const SizedBox(),
        );
      },
    );
  }
}

I'm using canvaskit rendering for web. When trying to display an image by url:

Image.network(banner.imageUrl)

I get the error: Another exception was thrown: [object ProgressEvent]

I solved the problem with the package from pub.dev: image_network

My solution:

import 'package:flutter/material.dart';
import 'package:image_network/image_network.dart';

/// Supports canvaskit rendering for web.
class AppNetworkImage extends StatelessWidget {
  final String imageUrl;

  const AppNetworkImage({
    super.key,
    required this.imageUrl,
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        return ImageNetwork(
          image: imageUrl,
          height: constraints.maxHeight,
          width: constraints.maxWidth,
          duration: 100,
          onPointer: true,
          onLoading: const SizedBox(),
        );
      },
    );
  }
}

回复收藏 0 原文

~没有更多了~