search

Catherine808 / f1-3-c2p1-colmar-academy

0 stars 0 forks source link

Relative Image Paths #1

Open jordanwillis opened 6 years ago

jordanwillis commented 6 years ago

Your HTML is looking pretty good so far. One very important thing to keep in mind is that you must always use relative paths for resources such as images or stylesheets vs. an absolute path.

https://github.com/Catherine808/f1-3-c2p1-colmar-academy/blob/master/colmarAcademy/index.html#L14 https://github.com/Catherine808/f1-3-c2p1-colmar-academy/blob/master/colmarAcademy/index.html#L26 etc...

The reason for this is because when you use an absolute path (such as C:\Users\Catherine Wombold\projects\colmarAcademy\resources\images\ic-logo.svg) the webpage will only every look correct when running on your local computer because the path is unique to your computer.

For example, when I try to view the page (you can use this rawgit url to see what your rendered HTML stored in GitHub looks like) none of the images can load because the source path is no longer valid.

Instead, you should always use relative paths. In fact, a good example of this is the path to your stylesheet in your HTML header.

https://github.com/Catherine808/f1-3-c2p1-colmar-academy/blob/master/colmarAcademy/index.html#L6

To correct this, you would need to add all the image files from the images/ folder inside the resources/ directory to git (git add ./resources/images), fix all the image src paths (src=./resources/images/<image file name>), commit those changes (git commit "<message>"), and finally push everything to GitHub (git push -u origin master).

Relative paths can be a bit confusing, so here is a resource that explains them as well.

https://www.w3schools.com/html/html_filepaths.asp

jordanwillis commented 6 years ago

As I was reviewing the rest of your project I discovered that you are in fact using relative paths for some of your images.

https://github.com/Catherine808/f1-3-c2p1-colmar-academy/blob/master/colmarAcademy/index.html#L48 https://github.com/Catherine808/f1-3-c2p1-colmar-academy/blob/master/colmarAcademy/index.html#L59 etc...

However, those actual image files are not in your GitHub repo. So it looks like your understand relative paths pretty well, so it's just a matter of getting those image files added to your repo.