图像未显示在 firebase 托管网站上

Question

i run command firebase deploy in my Project/public folder which contains index.html , main.css and an images folder, my webpage is hosted but images are not showing up in my webpage.

Answer 1

Hope this will help Someone who face this type of issue:

Problem

Images not showing up on firebase hosted website. This problem mainly arise due to some version issues..

Solution to the Problem:

1. This may cause due to the dot extension format(.png, .jpg..etc) of the image. Changing this will help to resolve the problem [eg. If your image format is.png just change it to.jpg format and check].

2. Next solution is to change the way you give the path to the image ie

   background-image: url("src/img/imageName.format"); //normal way background-image: url("../img/ImageName.jpg"); //use this way

=> Reffer site: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files#:~:text=Some%20general%20rules%20for%20file%20paths%3A

Thanks in Advance:)

Answer 2

I faced the same problem. Resolved it by providing relative path urls

example: Instead of using img src="User/local/..../img/pic.png use img src="img/pic.png"

where img is folder in public directory containing all the images

Since firebase console is reading your page from public directory,( which you might have created after all the coding done in some other folder)so changing the parent folder will not effect the webpage images if you use relative path of image.

Now use firebase deploy.