Firebase, Flutter Web App Works locally, but when deployed images are not shown

Question

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 hav

Answer 1

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": "6c43261a82a59e92d3d5d2b6824ffffd9a",
"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.