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'),
  ),
),

Ladysmith

Could you verify the solutions suggested in these two posts here and here – Croak

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 – Ladysmith

Answer 1

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.

Soliz

Answer 2

You can check the Base href in index.html file

<base href="/">

change / to your path/hosting/domain

Hiltan

Answer 3

What worked for me:

pubspec.yaml:

flutter:
  assets:
    - assets/images/

In my code:

-            Image.asset('images/good_fit.png', width: 160, height: 190), // old
+            Image.asset('assets/images/good_fit.png', width: 160, height: 190), // new

Sharyl