Firebase 图像无法在 Flutter Web 上运行

Question

您好，我正在尝试在我的 flutter Web 应用程序中调用来自 firebase 的图像。我尝试调用 NetworkImage 小部件中的链接，但它没有显示。它向我显示了一个我在下面添加的错误。请帮我解决这个问题并让我知道我可以在这里做什么..

---

错误：

无法清理资产目录构建 lutter_assets： PathNotFoundException：删除失败，路径 = 'build lutter_assets' （操作系统错误：系统找不到指定的路径。，errno = 3） 清理构建工件，使用命令“flutter clean”。这个应用程序是 链接到调试服务：ws://127.0.0.1:60955/4P3mTSqNQUQ=/ws 调试服务侦听 ws://127.0.0.1:60955/4P3mTSqNQUQ=/ws Debug 监听 ws://127.0.0.1:60955/4P3mTSqNQUQ=/ws 的服务

======== 图片资源服务捕获异常==================================== ============= 解析图像编解码器时抛出以下 ImageCodecException：无法 使用文件头检测图像文件格式。文件头为 [0x3c 0x21 0x44 0x4f 0x43 0x54 0x59 0x50 0x45 0x20]。图片来源：编码 图像字节

抛出异常时，堆栈是这样的： dart-sdk/lib/internal/js_dev_runtime/private/ddc_runtime/errors.dart 294:3 抛出 lib/_engine/engine/canvaskit/image_web_codecs.dart 37:7 创建 dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54 跑步身体 dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 127:5
_async lib/_engine/engine/canvaskit/image_web_codecs.dart 22:46 创建 lib/_engine/engine/canvaskit/image.dart 13:34
skiaInstantiateImageCodec lib/_engine/engine/canvaskit/renderer.dart 198:15 实例化ImageCodec dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54
runBody dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 127:5 _async lib/_engine/engine/canvaskit/renderer.dart 193:41 实例化ImageCodec lib/ui/painting.dart 493:28
实例化ImageCodecWithSize dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54
runBody dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 127:5 _async lib/ui/painting.dart 488:44
实例化ImageCodecWithSize 包/flutter/src/painting/binding.dart 141:15
实例化ImageCodecWithSize 包/flutter/src/painting/_network_image_web.dart 164:20
_loadAsync dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 45:50
dart-sdk/lib/async/zone.dart 1661:54
runUnary dart-sdk/lib/async/future_impl.dart 162:18
handleValue dart-sdk/lib/async/future_impl.dart 846:44
handleValueCallback dart-sdk/lib/async/future_impl.dart 875:13
_propagateToListeners dart-sdk/lib/async/future_impl.dart 647:5 [_completeWithValue] dart-sdk/lib/async/future_impl.dart 721:7
回调 dart-sdk/lib/async/schedule_microtask.dart 40:11
_microtaskLoop dart-sdk/lib/async/schedule_microtask.dart 49:5 _startMicrotaskLoop dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 181:7
图片提供者：NetworkImage("", scale: 1.0) 图片密钥： 网络图像（“”，比例：1.0）

======== 图片资源服务捕获异常==================================== ============= 解析图像编解码器时抛出以下 ProgressEvent$ 对象：[object 进度事件]

当抛出异常时，这是堆栈：图像提供者： NetworkImage("https://firebasestorage.googleapis.com/v0/b/noeticeducation-88945.appspot.com/o/test%2FScreenshot%202023-10-14%20232028.png?alt=media&token=f9b85ea2-490a-481f -a9f2-f53f9af3e28b”， 比例：1.0）图像键： NetworkImage("https://firebasestorage.googleapis.com/v0/b/noeticeducation-88945.appspot.com/o/test%2FScreenshot%202023-10-14%20232028.png?alt=media&token=f9b85ea2-490a-481f -a9f2-f53f9af3e28b”， 规模：1.0）

Answer 1

我在 Cloud Storage for Firebase

找到了此解决方案

要直接在浏览器中下载数据，您必须配置Cloud Storage 存储桶以进行跨源访问 (CORS)。 这可以使用 gsutil 命令行工具来完成，您可以从此处安装

如果您不想要任何基于域的限制（最常见的情况），请将此 JSON 复制到名为 cors.json 的文件中：

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

运行

gsutil cors set cors.json gs://<your-cloud-storage-bucket>

来部署这些限制。

有关更多信息，请参阅 Google 云存储文档