Flutter web: Some png assets not loaded (404) status

Question

I added web support to my flutter mobile project. project built good and in build time there are no error or a problem.

After build project, web folder created inside build folder.Inside web folder i have these files and folders:

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

Inside assets folder,there is assets folder again :

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

Inside this assets, there are assets of project:

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

I copy images and svgs folders into last path /build/web/assets.Then I added web folder into /usr/share/nginx/html path of nginx container by running this:

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

And then in chrome it this url http://localhost:8081/ i see my page.

Problem:

Some png status files have 404 in DevTools of chrome. I see this url http://localhost:8081/assets/assets/images/CardMask.png

CardMask.png also exist at this location:

/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

and in container:

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#

I added assets folder in pubspec.yaml like this:

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

What is a problem ?

$ 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!

How can i remove second assets in this link : http://localhost:8081/assets/assets/images/CardMask.png

If the path be http://localhost:8081/assets/images/CardMask.png, i can see my png but in http://localhost:8081/assets/assets/images/CardMask.png i got 404

I am using this code to show 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'),
  ),
),

Could you verify the solutions suggested in these two posts [here](https://stackoverflow.com/questions/58878346/flutter-web-asset-images-not-displaying-when-deployed-to-web-server/58880217#58880217) and [here](https://stackoverflow.com/questions/62292512/firebase-flutter-web-app-works-locally-but-when-deployed-images-are-not-shown/62466271#62466271) — Abhilash Chandran, Nov 03 '20 at 11:33
I checked those links and i can't find problem in my structure. The problem is here : If the link be `http://localhost:8081/assets/images/CardMask.png` everything is good but i don't know why link is `http://localhost:8081/assets/assets/images/CardMask.png` ? Second asset is a problem @AbhilashChandran — Cyrus the Great, Nov 03 '20 at 12:31

score 0 · Answer 1 · edited Aug 04 '21 at 07:06

0

I had the same problem, when I uploaded to the server running apache/nginx. I have to move all files and folders in assets/assets to assets manually. I don't know how it runs in my localhost.

edited Aug 04 '21 at 07:06

Dharman

30,962
25
85
135

answered Aug 04 '21 at 07:00

Tan Nguyen

386
4
9

score 0 · Answer 2 · answered Aug 04 '21 at 07:47

0

You can check the Base href in index.html file

<base href="/">

change / to your path/hosting/domain

answered Aug 04 '21 at 07:47

KAnggara75

103
1
8

Flutter web: Some png assets not loaded (404) status

2 Answers2