First HTML Project – Broken Image

So I began studying code this month and I’m doing an online Web Development Bootcamp. My first assignment was to create a publish a simple HTML site on GitHub. I just published my site but when I go and check it out, the image is broken, which wasn’t happening on the Offline version.

So this noob here needs help trying to figure out what I did wrong.

sakurach4n’s first HTML project

Answer

This commonly happens when migrating from a local site to a live site.

The “src” for the image needs to be published/hosted somewhere on the web so it has a direct URL to the image, like this image of a cat: https://ichef.bbci.co.uk/news/1024/cpsprodpb/151AB/production/_111434468_gettyimages-1143489763.jpg

It works locally because that file is present on your local machine in a folder somewhere. Because the file path is relative it now searches for the image like this: https://sakurach4n.github.io/images/mafalda.png (which does not exist)

Leave a Reply

Your email address will not be published. Required fields are marked *