Flutter web asset images not displaying when deployed to web server

P

15

30

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

Praseodymium answered 15/11, 2019 at 13:46 Comment(1)

See this link: https://mcmap.net/q/468817/-flutter-web-asset-images-not-displaying-when-deployed-to-web-server – Southsoutheast 4/9, 2021 at 18:16

S

6

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

Semple answered 15/11, 2019 at 13:58 Comment(6)

worked like a charm. I did not have to add them to pubspec.yaml tho. – Praseodymium 15/11, 2019 at 15:34

@Praseodymium hey this is not working out for me. I have my assets folder uploaded just fine with all the images declared in pubspec.yaml – Heracliteanism 6/7, 2020 at 19:31

I've added path to every image in pubspec.yaml, but it still isn't working. And what exactly did you mean, when you were saying upload your assets folder to web server ? – Cicerone 21/6, 2021 at 13:29

@MayurAgarwal when I answered this question Flutter Web is in beta stage so I don't know what happened in stable version. – Semple 21/6, 2021 at 14:16

Ok, Should I move assets folder under web folder ? – Cicerone 21/6, 2021 at 14:19

To clarify, you should add your assets folder into your web folder. Make sure your pubspec.yaml references this web folder. – Pulsimeter 16/5, 2023 at 14:14

M

15

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.

Mccue answered 15/11, 2019 at 15:34 Comment(2)

Hey man, didn't help. I checked all my files are there but the asset images are not showing up. – Heracliteanism 6/7, 2020 at 19:39

@Heracliteanism Can you check if this answer helps you. There could be reasons how you access the asset image especially if you host the web app. – Mccue 7/7, 2020 at 9:22

O

12

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

Overshadow answered 7/6, 2022 at 8:54 Comment(3)

I don't get it. Are you rewriting all your asset paths before deploying, then reverting back ? Why can the build auto-append the assets/ prefix to the paths if that's the expected behavior ? – Arela 26/11, 2022 at 13:22

@TheGioiSo is onto something. I have my images in my pubspec.yaml defined as - assets/images/ but when I do flutter build web I can see they end up placed in assets/assets/images/. If after building you go into the build folder and move the image files back down to their intended location at assets/images/ it works as expected when deployed. This is probably an issue to raise with the team behind the flutter build tools if it hasn't been already. – Impolicy 5/6, 2023 at 12:32

this is wired indeed, maybe it's a flutter bug? – Galarza 24/9, 2023 at 11:39

B

11

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

Broeder answered 2/10, 2021 at 16:45 Comment(3)

I feel like this answer shouldn't have been here, since it's the complete opposite of the question... but it saved me. Thanks!!! – Metrist 28/3, 2023 at 17:21

IDK how you end up with your thought, op is looking for a solution to the missing assets file in his prod env, and that's the same one I encountered too.. anyway happy to help! – Broeder 29/3, 2023 at 14:9

My apologies! I absolutely read your statement wrong. I misread "development" as deployed. I spent hours looking for a solution, so no doubt my brain wasn't functioning 100%. Thanks again! – Metrist 8/4, 2023 at 5:24

S

6

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

Semple answered 15/11, 2019 at 13:58 Comment(6)

worked like a charm. I did not have to add them to pubspec.yaml tho. – Praseodymium 15/11, 2019 at 15:34

@Praseodymium hey this is not working out for me. I have my assets folder uploaded just fine with all the images declared in pubspec.yaml – Heracliteanism 6/7, 2020 at 19:31

I've added path to every image in pubspec.yaml, but it still isn't working. And what exactly did you mean, when you were saying upload your assets folder to web server ? – Cicerone 21/6, 2021 at 13:29

@MayurAgarwal when I answered this question Flutter Web is in beta stage so I don't know what happened in stable version. – Semple 21/6, 2021 at 14:16

Ok, Should I move assets folder under web folder ? – Cicerone 21/6, 2021 at 14:19

To clarify, you should add your assets folder into your web folder. Make sure your pubspec.yaml references this web folder. – Pulsimeter 16/5, 2023 at 14:14

P

6

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

Philana answered 24/6, 2021 at 15:5 Comment(0)

E

5

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

Enthronement answered 17/7, 2021 at 3:39 Comment(0)

B

3

If you have

  assets:
    - assets/

And your folder is like assets/images then in local run, it will work fine if you open image as /images/image_name.png etc but when you build for web, it will not include the /images folder so you have to add it like

  assets:
    - assets/
    - assets/images

Now it will include the assets/assets/images folder in the web build folder

Edit: Also you'll need to implement a logic to check if its a web then assets location will be assets/assets/images and on ios/android it'll ne assets/images

Blasphemous answered 16/12, 2023 at 10:31 Comment(0)

S

2

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

Squill answered 27/8, 2021 at 15:8 Comment(0)

S

1

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

Selfcontent answered 16/6, 2022 at 17:29 Comment(0)

F

1

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!

Felicio answered 13/11, 2022 at 4:56 Comment(1)

My exact issue, revealed after realizing the asset gives 403, thanks! – Gothicize 28/1 at 18:15

R

1

You can solve the issue of asset images not showing up when deploying a flutter web project to a web server by following either of the two options:

Run with: flutter run -d chrome --web-renderer html
Add the following to web/index.html:

<script type="text/javascript">
    window.flutterWebRenderer = "html";
</script>

You can try either of the two options and see if it works for you.

Rue answered 16/3, 2023 at 22:0 Comment(0)

J

1

In my case, the problem was I was using Image.network instead of Image.asset which did not cause an error when running locally as the images were viewed fine locally and only caused the images to not be viewed in deployment.

Janenejanenna answered 19/4, 2023 at 20:42 Comment(1)

THANK YOU! This solved my issue I was having!! – Soni 15/7 at 10:25

D

0

In my case I was also accessing the assets/assets folder. I have moved one level back, copying assets/assets/img -> assets/img and it has worked.

Decision answered 1/8, 2023 at 13:25 Comment(0)

W

0

In my case I didn't realise the cAsE of the filenames on some of my images didn't match what I had in my code, so for example I had an image named assets/images/myimage.png, but I was referencing it as Image.asset('assets/images/MyImage.png'). This worked fine in development (I guess because the dev web server is NOT CASE SENSITIVE when serving files) but broke when I uploaded to my web server (Digital Ocean app platform - which I'm guessing IS case sensitive).

Witter answered 30/8, 2023 at 10:59 Comment(0)

T

-1

Blockquote Blockquoteemphasized textstrong text

Heading

Tubule answered 5/6 at 6:58 Comment(1)

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Sulfapyrazine 6/6 at 11:21

Heading

Heading

Recommended topics

Hot tags