Images not showing up in hosted site

user_347304 0
Viewed 6628

Thanks for taking the time to look at this, I've researched as best I can but am not coming up with anything. I saw a similar stack overflow post about waiting for images to be done processing, but I've been waiting for about 2.5 hours and the images are still missing.

I am using angularfire with Firebase. I am using grunt build to create a dist folder and that is what I am deploying to Firebase. The dist folder contains an images folder and firebase says it's uploading 780 files when it deploys (before I added the images it was about 25).

However, the images just don't seem to show up. The URL pattern is my-app.firebaseapp.com/images/image-name.jpg

My firebase.json file is shown below, it's pretty basic.

{
  "firebase": "<redacted>",
  "public": "dist",
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ]
}

The app itself deploys just fine and works, all the images are just 404ing. I apologize in advance for what I am guessing is something very basic that I'm missing.

firebase-hosting
3 Answers

After Redeploying a million times to no avail, I figured I had to troubleshoot and figure out what was wrong. I inspected the url for the file i.e. https://exampleApp.firebaseapp.com/img/myimg.png or whatever it is in your case. In essence my problem was simply case sensitivity. So instead of myimg.png the file was stored as myimg.PNG. So just check if that extension is your issue.

user_107953460

It is probably because the src, rel, and href tags contain absolute urls which causes firebase issues while getting to the right file. What you must do is, get all the URLs to be relative, such as: images/image1.png you must do this even with your css and js links. Also, you must store every thing in a folder named public, or you will have to change the name to your directory while prompted in the command prompt regarding to use specific directory as public.

user_87252470
Related