Images in Github Pages and Relative Links

Images in github pages and relative links

As the site is being served by Linux servers, the path is case sensitive.

In order to make this work, replace emoticons with Emoticons in the provided url.

Also, in a URL, replace the backslash (\) by a forward slash (/).

The following HTML code should properly display the image

<img src="images/Emoticons/cool.png" alt="hi" class="inline"/>

GitHub pages and relative paths

Which browser are you using? Are you sure that this happens? Because it shouldn't. If you include a relative URL in a link, it will get resolved relative to the URL of the document that contains the link. In other words, when you include

<link href="assets/css/common.css" rel="stylesheet">

in an HTML document at http://www.foo.com/bar/doc.html, the link to assets/css/common.css will get resolved by appending it to the prefix of the URL of the HTML document without the last part of the path (without doc.html), i.e. the link will resolve to http://www.foo.com/bar/assets/css/common.css, not to http://www.foo.com/assets/css/common.css as you claim.

For example, view the source of the Twitter Bootstrap webpage: http://twitter.github.io/bootstrap/. Notice the style links at the top, specified as <link href="assets/css/bootstrap.css" rel="stylesheet">. That link correctly resolves to http://twitter.github.io/bootstrap/assets/css/bootstrap.css, i.e. it does include the repo name.

What is correct way to include images on GitHub Pages?

According to your domain kubamichalczyk.github.io , you are using User and Organization Pages sites.

The correct way to do this involves adding an url configuration to _config.yml with your production url and using that key in your templates when loading images.

Using github pages gem

Make sure you use the Github pages gem to be in synch with your production environment and not depend on your local configuration

     $ bundle init

In Gemfile:

source 'https://rubygems.org'
gem 'github-pages', group: :jekyll_plugins

Install the correct Jekyll version:

$ bundle install

Then always run jekyll with bundle:

$ bundle exec jekyll serve

Adding url

In _config.yml:

url: https://kubamichalczyk.github.io/

Images folder

Images shouldn't be inside _posts folder, they should be at root:

/images

Referring to images

In posts use the above url config so it will be replaced with localhost when developing and with your Github pages site url in production {{site.url}}/images/equation-1.gif:

<img src="{{site.url}}/images/equation-1.gif" style="display: block; margin: auto;" />

Trouble Connecting images and secondary pages to GitHub index.html

EDIT! Found A Solution. Maybe not the best?

I copied the url at the top of the page after clicking on the image itself inside the "img" folder in my repository. Before I was copying the path from the three "..." menu in GitHub. This worked and the background image is now showing up as it did when run from VSCode. I will post an update with this if it works for every image from here on out.

GitHub Pages Images not loading when added to new page

Since you are in the 'research' folder you want to go up a level. Try ../images_pdfs/SURFfinalPoster.jpg as an example for any image you link to on your research page.

Currently your relative path images are resolving to: http://www.catherineslaughter.space/research/images_pdfs/SURFfinalPoster.jpg

instead of

http://www.catherineslaughter.space/images_pdfs/SURFfinalPoster.jpg

Github-pages relative links not working when custom domain is used

You have two problems:

1. You are not using relative URLs.
2. You are not accounting for the server root being different with a custom domain.

Relative URLs

A relative URL is a path which is relative to the current location. However, a URL which starts with a slash is not relative to the current location. The opening slash indicates a path from the server root. In other words, to "normalize" the URL, simply prepend the domain.

Therefore, for a link to be relative to the current location, it cannot begin with a slash. Using your example structure, any links in the FOLDERFILE.md file would look like this:

[REPO_NAME](../)          <= step back one directory
[README.md](../README.md) <= step back one directory
[FOLDER_NAME](./)         <= the current directory

And any links in the README.md file would look like this"

[REPO_NAME](./)
[FOLDER_NAME](FOLDER_NAME/)
[FOLDERFILE.md](FOLDER_NAME/FOLDERFILE.md)

If it helps, you could start all URLs with the current directory (./). While not necessary, some people find it more readable. In that case, the README.md file would look like this"

[REPO_NAME](./)
[FOLDER_NAME](./FOLDER_NAME/)
[FOLDERFILE.md](./FOLDER_NAME/FOLDERFILE.md)

Server Root

It is important to understand the difference between the server root and your site's root. When they are the same, absolute links will work fine. However, when they are different, only true relative links will work across the two.

When you set up GitHub pages using the GitHub provided domain, your site is hosted at https://USERNAME.github.io/REPO_NAME. In that case, the server root is at USERNAME.github.io/ and that's where / points to. However, your site's root is in the subdirectory /REPO_NAME. Therefore for absolute URLs to work, the must include /REPO_NAME/ in them.

However, when you set up a custom domain, then the server root and the site's root are at the same location: https://example.com/. There is no REPO_NAME subdirectory. The contents of REPO_NAME are at /.

To illustrate, the following URLs point to the same location depending on whether you are using a GitHub domain or a custom domain.

GitHub Domain                        | Custom Domain
------------------------------------ | --------------------------
/REPO_NAME/                          | /
/REPO_NAME/README.md                 | /README.md
/REPO_NAME/FOLDER_NAME/              | /FOLDER_NAME/
/REPO_NAME/FOLDER_NAME/FOLDERFILE.md | /FOLDER_NAME/FOLDERFILE.md

And that difference is why you need to use true relative URLS -- URLs which do not start with a /.

---

Related Topics