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
There can be any of the following reasons for getting this error: Spelling mistake in the image name. Wrong Image path provided (Image doesn't exist at specified location) Wrong indentation for assets in pubspec.
We have a simple yet useful method in Flutter which we can use to load our asset images much faster — precacheImage()! This method prefetches the image into the image cache and then whenever the image is used, it will be loaded much faster.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With