Flutter web asset images not displaying when deployed to web server

Flutter web asset images not displaying when deployed to web server

I have created a flutter web project which uses network images and asset images, everything works fine when debugging on my pc but when I deploy it to a web server, the network images work fine but the asset images dont show at all. When I Inspect the page in the web browsers consol, I get the error below:

$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 

---

You should add photos to pubspec.yaml file and upload your assets folder to web server. Probably it is about not uploading folder

---

You should perhaps check if the file is available as part of your deployment. 404 is the usual error code you received for resource not found. 503 is something related to the server availability or server errors. I would do the following.

Step 1. Check the build folder

Try running the flutter build web command in your project and inspect the build folder. Assuming a pubspec.yaml with following asset configurations.

  assets:
    - js/plotly_hookup.js
    - js/plotly-latest.min.js
    - images/
    - screen_shot.png

I would expect the following inside my build\web\assets folder.

If this is not working as shown, then its time to inspect the pubspec.yaml file and correct the paths.

Step 2: check your hosted folder

Ensure the files as shown above are available in your server where this folder is hosted. Also verify if the server has any configurations to be made specifically for image files or types of images files.

---

Just do this with flutter 2.2.0 then you are all set.

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

---

Network Images are Failed to load When Run the Flutter Code on web browser. it’s because of HTML renderer issue.

you can run flutter code using following command or edit android studio settings for run .

flutter run -d chrome --web-renderer html

Two possible solution for Image Rendering Issue on Flutter web. Check it here https://youtu.be/U0Ez4CS6frc

---

In my case there was a STRANGE (as there is no error in desktop or native mobile) error only in mobile browsers, so make sure check your deployed application with a remote debugger on chrome while you are connected to your mobile device.

chrome://inspect/#devices

a currently working solution ...

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

---

Mine was perfectly working with development, when I deploy the build the logos were missing.

I fixed it by using HTML rendering while building the web assets

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

---

For Flutter Web 3.0:

your pubspec.yaml:

  assets:
    - assets/images/

test:

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

deploy:

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

Worked for me!!!

---

1. first check if the assets folder is in your web folder.
2. while accessing the assets try it writing "assets" two times. for example - "assets/assets/slack.png"

---

In my case it was due to the permissions of the images in the asset folder. Right click on your webpage to inspect and click on Console

If you have the following message:

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

You might want to check permissions for your image files with ls -la on your server

I had the following:

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

Then change them to public read with:

chmod 644 *`

Output:

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

And reload your index.html, should now work!