图像列表不显示在 Flutter-web 中

Posted 2023-02-23

【中文标题】图像列表不显示在 Flutter-web 中

【英文标题】：Images list doesn't display in flutter-web

【发布时间】：2021-11-04 20:21:37

【问题描述】：

我有一个新闻应用程序在我的手机上运行良好，但是当我尝试在网络浏览器中启动它时，它显示错误而不是图像。出现此问题是因为浏览器确保您的网页不显示来自其他页面的图像。我从 NewsApi 中获取这些图像，据我所知，它会解析新闻网站。

我尝试按照本指南进行操作：https://rodydavis.medium.com/displaying-html-in-flutter-8da44773764。却追不上。如果合并他们给出的相同代码 - 它不起作用。而且我不明白如何调整它。 我得到的错误是：

======== 图像资源服务捕获的异常 ================================= ================ 解析图像编解码器时引发了以下 ImageCodecException： 加载网络图像失败。 图片网址：https://nextbigfuture.s3.amazonaws.com/uploads/2021/09/Screen-Shot-2021-09-11-at-4.31.43-PM-1024x646.jpg 试图从另一个域加载图像？在以下位置找到答案： https://flutter.dev/docs/development/platform-integration/web-images。抛出异常时，这是堆栈： 图片提供者：NetworkImage("https://nextbigfuture.s3.amazonaws.com/uploads/2021/09/Screen-Shot-2021-09-11-at-4.31.43-PM-1024x646.jpg", scale: 1 ) 图片键：NetworkImage（“https://nextbigfuture.s3.amazonaws.com/uploads/2021/09/Screen-Shot-2021-09-11-at-4.31.43-PM-1024x646.jpg”，比例：1 ) ==================================================== ====================================================

我知道有一个用于解决此问题的文档的 URL。但是这方面的说明太小了。更详细的解决方案在我上面提供的文章 URL 中，我无法跟进。

List Image View 代码是：

ClipRRect(
        borderRadius: BorderRadius.circular(9),
        child: Image.network(
          article.urlToImage,
          key: UniqueKey(),
          fit: BoxFit.cover,
          width: double.infinity,
          height: 200,
          loadingBuilder: (BuildContext context, Widget child,
              ImageChunkEvent? loadingProgress) 
            if (loadingProgress == null) return child;
            return Center(
              child: Container(
                width: double.infinity,
                height: 200,
                child: CircularProgressIndicator(
                  color: Colors.lightBlueAccent,
                  value: loadingProgress.expectedTotalBytes != null
                      ? loadingProgress.cumulativeBytesLoaded /
                          loadingProgress.expectedTotalBytes!
                      : null,
                ),
              ),
            );
          ,
        ),
      ),

GitHub 项目网址：https://github.com/dimyak06112007/news_app/tree/updates。

【问题讨论】：

你试过用 Image.network(url) 代替 NetworkImageProvieder 吗？

我只试过 Image.network(url)。我也应该尝试 NetworkImageProvider 吗？

@DmytroYakymenko 实际上Network.Image(...) 应该可以工作。请使用您尝试过的代码以及从中获得的确切错误来编辑您的问题。 PS：图像可以显示结果，但不能用于代码；您应该始终将代码放在格式化文本中。

@Mat 我编辑了我的问题。谢谢。下一步是什么？

【参考方案1】：

当您在网络上加载图像时，需要考虑一个 CORS 因素。

当您从第三方域加载资源时，浏览器通常有一些安全阻止规则。有多种解决方法，

使用内存中的图像 将图像托管在支持 CORS 的 CDN 中 创建您自己的 CORS 代理

选项 3 可能适合您的情况，因为您从随机位置获取图像，您只需将它们标记为允许使用 CORS。

更多信息在这个链接https://flutter.dev/docs/development/platform-integration/web-images#lack-control-over-the-image-server-use-a-cors-proxy