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

Question

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

$1 @ 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)

$1 @ 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)

$1 @ 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)

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

Answer 1

您应该将照片添加到 pubspec.yaml 文件并将您的资产文件夹上传到 Web 服务器。可能是关于不上传文件夹

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

在 Web 浏览器上运行 Flutter 代码时无法加载网络图像。这是因为 HTML 渲染器问题。

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

flutter run -d chrome --web-renderer html

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

Answer 5

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

chrome://inspect/#devices

Answer 6

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

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

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