部署到 Web 服务器时不显示 Flutter Web 资产图像

Question

我创建了一个 flutter web 项目，它使用网络图像和资产图像，在我的电脑上调试时一切正常，但是当我将它部署到网络服务器时，网络图像工作正常但资产图像根本不显示。当我在 Web 浏览器控制台中检查页面时，出现以下错误：

 @ window.dart:120
/assets/slack.png:1 Failed to load resource: the server responded with a status of 503 ()
window.dart:120 Error while trying to load an asset: Failed to load asset at "assets/slack.png" (503)

 @ window.dart:120
/assets/flutterLogo.png:1 Failed to load resource: the server responded with a status of 503 ()
window.dart:120 Error while trying to load an asset: Failed to load asset at "assets/flutterLogo.png" (503)

 @ window.dart:120
/assets/kross.jpg:1 Failed to load resource: the server responded with a status of 503 ()
window.dart:120 Error while trying to load an asset: Failed to load asset at "assets/kross.jpg" (503)

 @ window.dart:120
/assets/codingRocket2.png:1 Failed to load resource: the server responded

Answer 1

您应该将照片添加到 pubspec.yaml 文件并将您的资产文件夹上传到网络服务器。应该是没有上传文件夹

Answer 2

您或许应该检查该文件是否可作为部署的一部分使用。 404 是您因未找到资源而收到的常见错误代码。 503 与服务器可用性或服务器错误有关。我会做以下事情。

步骤 1. 检查 build 文件夹

在您的项目中尝试运行 flutter build web 命令并检查构建文件夹。假设 pubspec.yaml 具有以下资产配置。

  assets:
    - js/plotly_hookup.js
    - js/plotly-latest.min.js
    - images/
    - screen_shot.png

我希望我的 build\web\assets 文件夹中有以下内容。

如果这不能正常工作，那么是时候检查 pubspec.yaml 文件并更正路径了。

第 2 步：检查您的托管文件夹

确保上面显示的文件在托管此文件夹的服务器中可用。还要验证服务器是否有任何专门针对图像文件或图像文件类型的配置。

Answer 3

只需使用 flutter 2.2.0 执行此操作即可。

flutter run -d chrome --web-port=8080  --web-renderer HTML //port is optional

Answer 4

当运行网络浏览器上的 Flutter 代码加载网络图像失败。这是因为 HTML 渲染器问题。

您可以使用以下命令运行 flutter 代码或编辑运行的 android studio 设置。

flutter 运行 -d chrome --web-renderer html

Flutter web 上图像渲染问题的两种可能解决方案。在这里查看 https://youtu.be/U0Ez4CS6frc

Answer 5

在我的案例中，仅在移动浏览器中出现了一个奇怪的错误（因为在桌面或本机移动设备中没有错误），因此请确保在 chrome 上使用远程调试器检查已部署的应用程序已连接到您的移动设备。

chrome://inspect/#devices

当前可用的解决方案...

flutter build web --release --web-renderer canvaskit

Flutter 2.8.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 77d935af4d (7 weeks ago) • 2021-12-16 08:37:33 -0800
Engine • revision 890a5fca2e
Tools • Dart 2.15.1

Answer 6

我的开发工作非常完美，当我部署构建时，徽标丢失了。

我在构建 Web 资产时使用 HTML 渲染修复了它

flutter build web --web-renderer html --release

部署到 Web 服务器时不显示 Flutter Web 资产图像

Flutter web asset images not displaying when deployed to web server

flutter

dart

flutter-web