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

Question

我创建了一个flutter web项目，该项目使用网络映像和资产映像，在PC上调试时一切正常，但是当我将其部署到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命令并检查build文件夹。 假设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 run -d chrome --web-renderer html

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