Images not showing up in hosted site

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

So, I sort of solved the problem. Grunt's imagemin thing during the build process did "something" to the images that caused them to not display. I will figure out what eventually and hopefully remember to update this post in case others run into this in the future. But in the meantime just replacing the built images folder with the source fixed the problem.