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 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'),
            )
          ],
        ),
      ),

Whyte

Have you tested viewing the website on a different browser? I have a portfolio website that looks normal on Chrome but on Safari, images are not visible sometimes. Try on different browsers and maybe we can understand the problem better. – Boogiewoogie

Yes I have tested it on safari and chrome, no results. I have also tried creating a new flutter web app, a simple one which displays only one image, doesn't work. – Whyte

In my case, I didn't mentioned assets/ for the Image file in Image.Asset. – Permanency

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": "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.

Justifier

If this didn't help please share your pubspec.yaml and your folder structure along the with the code where you access the Image. – Justifier

glad it helped you. :) – Justifier

My 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. – Auburn

I don't understand why assets/image.jpg turns into assets/assets/image.jpg in the first place!? Very counterintuitive... – Denti

Answer 2

pubspec.yaml

assets:
- assets/images/

Remember when you are in debug mode, you will have to do this

Image.network('assets/images/pic.jpeg')

but when the web app is deployed, it should be written like this:

Image.network('assets/assets/images/pic.jpeg')

you have to prepend an extra assets/ to the asset path so that it could work when deployed

So use this approach:

• import this file

  import 'package:flutter/foundation.dart';

• define a string that will take values depending on the DevelopmentMode

  String releasePath = kDebugMode ? '' : 'assets/';

• use this string everywhere in your project like this

  Image.network('${releasePath}assets/images/pic.jpeg')

you are all good to go.

Eigenfunction

Answer 3

The problem:

pubspec.yaml

flutter:
  assets:
    - images/

Initially, I was loading an image in flutter app as

Image.asset("images/banner.png")

The web app loads the image perfectly on localhost. But, as I deploy the web app on Firebase hosting, everything works fine, except that the image doesn't load!

The solution:

I inspected the Firebase hosting deployment as

firebase deploy --debug

In the terminal, I searched for banner.png to find that the image is uploaded, but is being accessed by a different path!

"/assets/assets/images/banner.png"

So, I changed the access path while loading the image by prepending assets/, as

Image.asset("assets/images/banner.png")

Now, it loads the image on localhost and from Firebase hosting, alike!

Telltale

Hello, 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 ? – Lafleur

This worked for me. I had the issue with a file that was being read on local but not being read once it was deployed. Thanks! – Maurreen