Menu
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.
288
Possible causesThe web page is not pointing to the correct URL (location) of the image. The server or computer hosting the image has moved or removed the image, and the web page has not yet been updated. The web page or computer hosting the image is getting too many requests and can't send you the image.
Why Is My Image Not Showing up in HTML? One of the reasons why your HTML image not showing in browser is that its file is not located in the same folder that is indicated within your tag. Also, the image may not load because the file name specified in the <img> tag does not match that of your image file.
Make sure the image path is set correctly in the background-image url. Once you have made sure that your CSS file is linked correctly, also check that the image itself is set correctly. Again, you will want to open your code inspector in the browser to check.
If the paths to your image files are correct, and the name and file extension are also error-free, check that the files have been uploaded to the web server. Neglecting to upload files to that server when a site is launched is a common mistake that is easy to overlook.
Incorrect names or misspellings are the most common cause of image-loading problems. 3. Wrong File Extensions In some cases, you may have the name of the file correctly spelled, but the file extension may be incorrect. If your image is a .jpg file, but your HTML is looking for a .png, there will be a problem.
One way to at least diagnose this problem is to see if the image is being hosted on an alternate server, then try to locate it. Right-click the image or broken link icon and select Properties from the drop-down menu that appears. You should see the Internet address of the image.
On the left side of the screen, select Site permissions. Under the Site permissions section, click the box labeled Images. On the Site permissions / Images screen, use the toggle switch to enable Show all (recommended). Close and reopen Microsoft Edge. To enable displaying images in Internet Explorer, follow these steps.
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.
166
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
