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 

- Norbert

---

请查看此链接：https://dev59.com/oVMH5IYBdhLWcg3woQnQ#68417207 - Abhishek Bedi

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：检查托管文件夹

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

- Abhilash Chandran

---

兄弟，没帮上忙。我检查了所有文件都在，但是资产图像没有显示出来。 - devDeejay

@devDeejay，你能否检查一下这个答案是否对你有帮助。特别是如果你托管了Web应用程序，访问资产图像可能会有不同的原因。 - Abhilash Chandran

Answer 2

针对Flutter Web 3.0：

你的pubspec.yaml文件：

  assets:
    - assets/images/

测试：

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

部署:

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

对我有用！！！

- The Gioi So

---

我不太明白。你是在部署之前重写所有的资源路径，然后再恢复吗？ 如果这是期望的行为，那么为什么构建过程不能自动将“assets/”前缀附加到路径上？ - Adrien Lemaire

@TheGioiSo 是对的。我在我的 pubspec.yaml 文件中将图片定义为 - assets/images/，但是当我执行 flutter build web 命令时，我发现它们被放置在 assets/assets/images/ 中。如果在构建完成后进入构建文件夹，并将图像文件移回到它们预期的位置 assets/images/，那么在部署时就能按预期工作。如果这个问题还没有被提出，可能需要向负责 flutter 构建工具的团队反馈。 - Sound Conception

确实有点奇怪，也许是Flutter的一个bug呢？ - undefined

Answer 3

我的开发环境下一切正常，但是当我部署构建之后，标志（logo）消失了。

我通过在构建网络资源时使用HTML渲染来解决问题。

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

- AllwiN

---

我觉得这个回答不应该在这里，因为它完全相反于问题......但是它救了我。谢谢!!! - FoxDonut

我不知道你是怎么想到的，但是这个问题的确存在。OP正在寻找在生产环境中缺失资产文件的解决方案，而我之前也遇到过同样的问题。无论如何，很高兴能够帮忙！ - AllwiN

非常抱歉！我完全误读了你的陈述。我将“开发”错看成了“部署”。我花了几个小时寻找解决方案，毫无疑问我的大脑没有100%的功能。再次感谢！ - FoxDonut

Answer 4

当在Web浏览器上运行Flutter代码时，网络图片无法加载。这是由于HTML渲染器问题引起的。

您可以使用以下命令运行Flutter代码或编辑Android Studio设置以进行运行。

flutter run -d chrome --web-renderer html

Flutter Web中图片渲染问题的两种可能解决方案。请在此处查看：https://youtu.be/U0Ez4CS6frc

- Kamal Bunkar

Answer 5

只需使用Flutter 2.2.0即可完成此操作。

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

- Agoo Clinton

Answer 6

您需要将照片添加到pubspec.yaml文件中，并将您的资产文件夹上传到Web服务器。可能是由于未上传文件夹造成的问题。

- furkeen

---

运行得非常好。我甚至不需要将它们添加到 pubspec.yaml 文件中。 - Norbert

嗨，@Norbert，这对我来说行不通。我的资产文件夹已经上传了，所有在pubspec.yaml中声明的图像都很好地处理了。 - devDeejay

我已经在pubspec.yaml中添加了每个图像的路径，但它仍然无法正常工作。当你说“将资产文件夹上传到Web服务器”时，你具体是指什么？ - Mayur Agarwal

@MayurAgarwal 当我回答这个问题时，Flutter Web处于beta阶段，所以我不知道在稳定版本中发生了什么。 - furkeen

好的，我应该将资产文件夹移动到网页文件夹下吗？ - Mayur Agarwal

请注意，您应该将资产文件夹添加到您的网页文件夹中。确保您的pubspec.yaml引用了这个网页文件夹。 - bm888

Answer 7

在我的情况下，只有在移动浏览器中出现了奇怪的错误（因为桌面或本机移动设备中没有错误），因此请确保在连接到移动设备时使用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

- HoseinGhanbari

Answer 8

1. 首先检查资产文件夹是否在您的网页文件夹中。
2. 在访问资产时，请尝试将“assets”写两次。例如 - “assets/assets/slack.png”

- Kanad Patil

Answer 9

在我的情况下，这是由于资产文件夹中图像的权限问题。 右键单击您的网页以进行检查，并单击“控制台”

如果您看到以下消息：

main.dart.js:7090          GET  
https://mywebsite.com/assets/images/Test/180229115.jpg 403 (Forbidden)

你可能想要在服务器上使用 ls -la 检查你的图像文件权限。

我有以下内容：

-rwxr----- image1.jpg
-rwxr----- image2.jpg
-rwxr----- etc

然后使用以下代码将它们更改为公共读：

chmod 644 *`

输出：

-rw-r--r-- image1.jpg
-rw-r--r-- image2.jpg
-rw-r--r-- etc

重新加载您的index.html，现在应该可以工作了！

- Antonin GAVREL

Answer 10

在我的情况下，问题是我使用了Image.network而不是Image.asset，这在本地运行时没有引起错误，因为图像在本地正常显示，但在部署时导致图像无法显示。

- laila nabil