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

Question

我创建了一个flutter web使用网络图像和资产图像的项目，在我的电脑上调试时一切正常，但是当我将其部署到 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

您或许应该检查该文件是否作为部署的一部分可用。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 2

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

我在构建 Web 资源时使用 HTML 渲染修复了这个问题

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

Answer 3

对于 Flutter Web 3.0：

你的 pubspec.yaml：

  assets:
    - assets/images/

测试：

Image.asset("images/logo.png");

部署：

Image.asset("assets/images/logo.png");

为我工作！

Answer 4

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

Answer 5

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

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

Answer 6

在浏览器上运行Flutter代码时，网络图片加载失败。it\xe2\x80\x99s 因为 HTML 渲染器问题。

\n

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

\n

flutter run -d chrome --web-renderer html

\n

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

\n