使用 Firebase 后端的 Flutter Web 应用程序中出现对象进度事件错误

Question

我开发了一款带有 Firebase 后端的 Flutter 应用程序，可以在其中创建帐户并上传图像。 在 Android 应用程序中，我在显示以前上传的图像时没有出现错误。 但在应用程序的网络版本中，上传的图像不可见，而是显示此消息，而不是每张图像：

“对象进度事件”

我尝试更改 Firebase 中的规则但没有帮助。

更改 Firebase 规则、以隐身模式打开 Chrome、尝试其他浏览器。

Answer 1

解决方案： 在您项目中的index.html 将渲染器从 CanvasKit 更改为 html

 <script>
    window.addEventListener('load', function (ev) {
      // var loading = document.querySelector('#loading');
      // loading.textContent = "Loading entrypoint...";
      // Download main.dart.js
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        },
        onEntrypointLoaded: async function (engineInitializer) {
          let appRunner = await engineInitializer.initializeEngine({
            hostElement: document.querySelector("#flutter_app"),
            renderer: "html"
          }).then(function (appRunner) {
            return appRunner.runApp();
          });
        }
      })
    });
  </script>

当我尝试显示 Firebase 存储中的图像时，我遇到了同样的错误。显然，Firebase 存储图像有标题。

这是我修复之前的错误：

Response: ImageCodecException: Failed to detect image file format using the file header.
File header was [0x3c 0x21 0x44 0x4f 0x43 0x54 0x59 0x50 0x45 0x20].
Image source: encoded image bytes.response

我做了很少的研究，我发现如果你使用 Canvas Kit 作为渲染器而不是 HTML 会导致问题

仅供参考-

HTML：此渲染器使用 HTML、CSS、Canvas 2D 和 SVG 的组合来渲染 UI。它使用该元素来渲染图像。 CanvasKit：此渲染器使用 WebGL 渲染 UI，因此需要访问图像的像素。

希望这会有所帮助！

Answer 2

这个解决方案帮助了我。谢谢你。