Flutter web：一些png资产未加载（404）状态

Posted 2023-02-23

【中文标题】Flutter web：一些png资产未加载（404）状态

【英文标题】：Flutter web: Some png assets not loaded (404) status

【发布时间】：2021-02-16 01:35:58

【问题描述】：

我为我的 Flutter 移动项目添加了 Web 支持。项目构建良好，在构建时没有错误或问题。

构建项目后，web 文件夹 在 build 文件夹 内创建。在 web 文件夹内我有这些文件和文件夹：

$ ls
assets  favicon.png  flutter_service_worker.js  icons  index.html  main.dart.js  manifest.json  version.json

在assets文件夹里面，又是assets文件夹：

/build/web/assets
$ ls
AssetManifest.json  assets  FontManifest.json  fonts  NOTICES  packages

在这个assets里面，有project的assets：

/build/web/assets/assets
$ ls
fonts  images  male.svg  svgs  webfonts

我将图像和 svgs 文件夹复制到最后一个路径 /build/web/assets。然后我通过运行以下命令将 web 文件夹添加到 nginx 容器的 /usr/share/nginx/html 路径中：

docker run -it --rm -d -p 8081:80 --name web -v /mnt/Project/Flutter/Projects/app_web/build/web:/usr/share/nginx/html nginx

然后在 chrome 中这个 url http://localhost:8081/ 我看到了我的页面。

问题：

部分png状态文件在chrome的DevTools中有404。我看到这个网址http://localhost:8081/assets/assets/images/CardMask.png

CardMask.png 也存在于这个位置：

/build/web/assets/assets/images
$ ls -la
total 569
drwxrwxrwx 1 root root   4096 Nov  3 14:13 .
drwxrwxrwx 1 root root   4096 Nov  3 14:13 ..
-rwxrwxrwx 1 root root   4319 Nov  3 14:13 CardMask.png

在容器中：

root@442f35f12938:/usr/share/nginx/html# ls
assets       flutter_service_worker.js  index.html    manifest.json
favicon.png  icons          main.dart.js  version.json
root@442f35f12938:/usr/share/nginx/html# cd assets/
root@442f35f12938:/usr/share/nginx/html/assets# ls
AssetManifest.json  FontManifest.json  NOTICES  assets  fonts  images  packages  svgs
root@442f35f12938:/usr/share/nginx/html/assets# cd assets/
root@442f35f12938:/usr/share/nginx/html/assets/assets# ls
fonts  images  male.svg  svgs  webfonts
root@442f35f12938:/usr/share/nginx/html/assets/assets# cd images/
root@442f35f12938:/usr/share/nginx/html/assets/assets/images# ls
3DBoxes.png   Intersection.svg        bime.png     recieptPage.svg  tick.png
At3.svg       OperationMaskGroup.png  mahak.png    theme.jpg
CardMask.png  RightArcMask.png        receipt.png  theme1.png
root@442f35f12938:/usr/share/nginx/html/assets/assets/images# 

我在pubspec.yaml 中添加了 assets 文件夹，如下所示：

  assets:
    - assets/images/
    - assets/svgs/
    - assets/svgs/regular/
    - assets/fonts/
    - assets/webfonts/

有什么问题？

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, 1.23.0-18.1.pre, on Linux, locale en_US.UTF-8)
[✓] android toolchain - develop for Android devices (Android SDK version 29.0.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.0)
[✓] VS Code (version 1.50.1)
[✓] Connected device (2 available)

• No issues found!

如何在此链接中删除 第二资产：http://localhost:8081/assets/assets/images/CardMask.png

如果路径是http://localhost:8081/assets/images/CardMask.png，我可以看到我的png，但在http://localhost:8081/assets/assets/images/CardMask.png 中我得到了404

我正在使用此代码显示 png ：

Align(
  alignment: Alignment.topLeft,
  child: ColorFiltered(
    colorFilter:
        ColorFilter.mode(widget.themeColor, BlendMode.srcATop),
    child: kIsWeb
        ? Image.network('assets/images/CardMask.png')
        : Image.asset('assets/images/CardMask.png'),
  ),
),

【问题讨论】：

您能否验证一下here 和here 这两个帖子中建议的解决方案

我检查了这些链接，但在我的结构中找不到问题。问题就在这里：如果链接是http://localhost:8081/assets/images/CardMask.png 一切都很好，但我不知道为什么链接是http://localhost:8081/assets/assets/images/CardMask.png？第二个资产是个问题@AbhilashChandran

【参考方案1】：

当我上传到运行 apache/nginx 的服务器时，我遇到了同样的问题。我必须手动将资产/资产中的所有文件和文件夹移动到资产。我不知道它是如何在我的 localhost 中运行的。

【参考方案2】：

您可以检查 index.html 文件中的 Base href

<base href="/">

将 / 更改为您的路径/主机/域