Flutter web：某些 png 资源未加载（404）状态

Question

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

\n

构建项目后，在构建文件夹中创建了Web 文件夹。在 Web 文件夹中我有这些文件和文件夹：

\n

$ ls\nassets  favicon.png  flutter_service_worker.js  icons  index.html  main.dart.js  manifest.json  version.json\n

\n

在assets文件夹中，又存在assets文件夹：

\n

/build/web/assets\n$ ls\nAssetManifest.json  assets  FontManifest.json  fonts  NOTICES  packages\n

\n

在这个资产里面，有项目的资产：

\n

/build/web/assets/assets\n$ ls\nfonts  images  male.svg  svgs  webfonts\n

\n

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

\n

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

\n

然后在 Chrome 中这个网址http://localhost:8081/我看到了我的页面。

\n

问题：

\n

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

\n

\n

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

\n

/build/web/assets/assets/images\n$ ls -la\ntotal 569\ndrwxrwxrwx 1 root root   4096 Nov  3 14:13 .\ndrwxrwxrwx 1 root root   4096 Nov  3 14:13 ..\n-rwxrwxrwx 1 root root   4319 Nov  3 14:13 CardMask.png\n

\n

并在容器中：

\n

root@442f35f12938:/usr/share/nginx/html# ls\nassets       flutter_service_worker.js  index.html    manifest.json\nfavicon.png  icons          main.dart.js  version.json\nroot@442f35f12938:/usr/share/nginx/html# cd assets/\nroot@442f35f12938:/usr/share/nginx/html/assets# ls\nAssetManifest.json  FontManifest.json  NOTICES  assets  fonts  images  packages  svgs\nroot@442f35f12938:/usr/share/nginx/html/assets# cd assets/\nroot@442f35f12938:/usr/share/nginx/html/assets/assets# ls\nfonts  images  male.svg  svgs  webfonts\nroot@442f35f12938:/usr/share/nginx/html/assets/assets# cd images/\nroot@442f35f12938:/usr/share/nginx/html/assets/assets/images# ls\n3DBoxes.png   Intersection.svg        bime.png     recieptPage.svg  tick.png\nAt3.svg       OperationMaskGroup.png  mahak.png    theme.jpg\nCardMask.png  RightArcMask.png        receipt.png  theme1.png\nroot@442f35f12938:/usr/share/nginx/html/assets/assets/images# \n

\n

我像这样添加了资产文件夹pubspec.yaml：

\n

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

\n

什么是问题？

\n

$ flutter doctor\nDoctor summary (to see all details, run flutter doctor -v):\n[\xe2\x9c\x93] Flutter (Channel beta, 1.23.0-18.1.pre, on Linux, locale en_US.UTF-8)\n[\xe2\x9c\x93] Android toolchain - develop for Android devices (Android SDK version 29.0.3)\n[\xe2\x9c\x93] Chrome - develop for the web\n[\xe2\x9c\x93] Android Studio (version 4.0)\n[\xe2\x9c\x93] VS Code (version 1.50.1)\n[\xe2\x9c\x93] Connected device (2 available)\n\n\xe2\x80\xa2 No issues found!\n

\n

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

\n

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

\n

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

\n

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

\n

Answer 1

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