Bottom nav media query, missing image, broken page

HTML & CSS
23

Exactly.

When you say this:

<img src="/IMAGES/IMG_03691-1024x768.jpg" alt="image">

The first backslash tells the browser that the image is to be found from the root which will give an image address of:

https://forallthetime.com/IMAGES/IMG_03691-1024x768.jpg

However you haven’t loaded your images into the root folder you have uploaded them inside the BI-300/ folder. (If you had loaded the images folder into the root folder then the code would have worked.)

The Full address to that folder image is:

https://forallthetime.com/BI-300/IMAGES/IMG_03691-1024x768.jpg

If you remove the first slash from your image url then it will tell the browser that it is a relative path from the current folder and it will find your images folder.

e.g.

<img src="IMAGES/IMG_03691-1024x768.jpg" alt="image">

You really need to become familiar with this as uploading content is a very basic operation and if you are unsure then you need to practice until you know what it means. Do some research on relative and root relative paths as it is an important concept :slight_smile:

1 Like
24

ok! thanks!

thanks for your support!

do not understand why, but my image showed up after no more than time! basically i waited between FTP and the final delivery (best word i can think of) i feel comfortable i can handle this from now on :slight_smile: just to be patient… this is not the first time code came through after a delay of time…if you go to the site, my iamges i had trouble with are there!

thanks again!

25

That’s because you now have the full path to the image online in the html.

<img src="https://forallthetime.com/BI-500/IMAGES/IMG_03691-1024x768.jpg" alt="">

That path won’t work for your local copy (well it will work because it will fetch it from online but it won’t work if you are not online).