时间戳

首页 > 解决方案 > 部署到 Web 服务器时不显示 Flutter Web 资产图像

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

问题描述

我创建了一个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

标签： flutterdartflutter-web

解决方案

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

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

推荐阅读