Firebase, Flutter Web App Works locally, but when deployed images are not shown
I checked the page you shared, this is one of the typical issues when you deploy to any hosting service. Its usually caused by the way you access the image.
One of your network request URL looks like this in the live page. You can check this in the developer tools of chrome.
https://websitehostingtry.web.app/assets/card.jpg
when I checked the flutter_service_worker.js
it shows the following listing where the assets are.
'use strict';
const CACHE_NAME = 'flutter-app-cache';
const RESOURCES = {
"index.html": "7136835e515d34b7b84f2ae95aff570f",
"/": "7136835e515d34b7b84f2ae95aff570f",
"main.dart.js": "2368f8417bf6d56998d2eb9d8db6dc09",
"favicon.png": "5dcef449791fa27946b3d35ad8803796",
"icons/Icon-192.png": "ac9a721a12bbc803b44f645561ecb1e1",
"icons/Icon-512.png": "96e752610906ba2a93c65f8abe1645f1",
"manifest.json": "6c43261a82a59e92d3d5d2b6824ddd9a",
"assets/LICENSE": "34da31f697be5f2fcfacf877df9adb0a",
"assets/AssetManifest.json": "7701bf8932c1b66ef282029ec69bb8ee",
"assets/FontManifest.json": "01700ba55b08a6141f33e168c4a6c22f",
"assets/packages/cupertino_icons/assets/CupertinoIcons.ttf": "115e937bb829a890521f72d2e664b632",
"assets/fonts/MaterialIcons-Regular.ttf": "56d3ffdef7a25659eab6a68a3fbfaf16",
"assets/assets/card.jpg": "6cbe9266e9c097ee95ab2e2c36048ee8"
};
Based on my analysis I am guessing in your code you are probably referring to the image as follows.
Image.asset('/assets/card.jpg');
or
Image.network('/assets/card.jpg');
This will map from the root domain and hence its looking up for https://websitehostingtry.web.app/assets/card.jpg.
So one approach would be to remove the additional forward slash before assets
in the path. for e.g.
Image.asset('assets/card.jpg');
Or if you prefer Image.network
then following would work.
Image.network('assets/assets/card.jpg');
Another approach and clearer one would be to create a new directory images and place the card.jpg in side that so that its clear whats inside.
Rationale is to name your folder by content type for clarity.
Change pubspec.yaml
to
flutter:
assets:
- images/
Then change your code to following.
Image.asset('images/card.jpg');
or
Image.network('assets/images/card.jpg');
Hope this helps.
Sarvesh Bhatnagar
I am a coding enthusiast, as of now all my focus goes to Dart and Flutter. I am also good at Cpp, C and Python.
Updated on December 21, 2022Comments
-
Sarvesh Bhatnagar over 1 year
I have a flutter web app which works well locally but after deploying it using
firebase deploy
the images are not shown in the website, I have checked if the assets have been uploaded by tracing, e.g. my_app.firebaseapp.com/assets/assets/card.jpg. (And the image is there, so it has uploaded properly but for some reason its not being displayed on the homepage itself).
Url: https://websitehostingtry.web.app/#/
https://websitehostingtry.web.app/assets/images/card.jpg
when running the same locally:
flutter run -d chrome --release
My Pubspec.yaml file:
name: website_try description: A new Flutter project. version: 1.0.0+1 environment: sdk: ">=2.7.0 <3.0.0" dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.3 dev_dependencies: flutter_test: sdk: flutter flutter: uses-material-design: true assets: - images/
In my dart code I just changed the default code to add Image after counter...
Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.headline4, ), Expanded( child: Image.network('assets/images/card.jpg'), ) ], ), ),
-
Abhilash Chandran almost 4 yearsIf this didn't help please share your
pubspec.yaml
and your folder structure along the with the code where you access theImage
. -
Abhilash Chandran almost 4 yearsglad it helped you. :)
-
Mayur Agarwal almost 3 yearsMy pubspec assets are like this - assets: - assets/ - assets/bg1.jpg - assets/mayur2.jpg And I am accessing the third image like , Image.asset('assets/mayur2.jpg') But still, nothing is happening.
-
Tom almost 2 yearsHello, I have the same problem and I think your solution would help me. But I dont't understand where exactly you changed the access path while loading the image by prepending assets/ .... can you help me out here ?