Images in github pages and relative links

Question

I created a user's github page.

Now, suppose I have an Image file at the root of the repo located as Images/Emoticons/Cool.png

I try to insert that image in my main Index.html file.
I write -
- <img src="\images\emoticons\cool.png"> and nothing shows up online and offline
- <img src="images\emoticons\cool.png"> and nothing shows up online but I can see the image offline
- <img src="..\images\emoticons\cool.png"> and nothing shows up online and offline

What should be done?

If you're trying to link from your GitHub Pages to an image in your main repo, you need to use the "raw" absolutely link. You can get that by going to the image in the main repo, clicking on raw and then copying that URL. — Joshua Pinter, Mar 27 '16 at 15:37
@JoshuaPinter, Using **raw link** surprisingly works. But can you explain why raw link works while the normal link doesn't? Thank you. — Adarsh TS, Sep 22 '20 at 10:00
@maddypie using a normal path, _index.html_ tries to locate the file locally. That is, it searches the current directory for a folder called _images_ which contains a folder _emoticons_ with an image _cool.png_ inside it. On the other hand, if you're trying to access a resource that's outside of this directory (even if it's within the same repo), a raw link is needed to locate it. Providing a raw link tells index.html to retrieve the resource from the web, i.e. not to try locating it as if it's a local resource. — Omar Sharaki, Oct 10 '20 at 13:07

score 52 · Accepted Answer · edited Jun 08 '20 at 16:09

52

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.

Screenshot of the repository

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"/>

edited Jun 08 '20 at 16:09

Thomas Weller

55,411
20
125
222

answered Jun 17 '13 at 07:29

nulltoken

64,429
20
138
130

score -7 · Answer 2 · answered Jun 17 '13 at 06:49

try this

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

Full Page 

<!DOCTYPE html>
<html>

  <head>
    <meta charset='utf-8' />
    <meta http-equiv="X-UA-Compatible" content="chrome=1" />
    <meta name="description" content="Home Page : My Github Web" />

    <link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">

    <title>Home Page</title>
  </head>

  <body>

    <!-- HEADER -->
    <div id="header_wrap" class="outer">
        <header class="inner">
          <a id="forkme_banner" href="https://github.com/Avi-Aryan">View on GitHub</a>

          <h1 id="project_title">Home Page</h1>
          <h2 id="project_tagline">Avi Aryan</h2>

        </header>
    </div>

    <!-- MAIN CONTENT -->
<div id="main_content_wrap" class="outer">
    <section id="main_content" class="inner">
    <br />
    Hi ! <img src="images/emoticons/cool.png" alt="hi" class="inline"/><br /><br />
    I am a young coder currently having school time in India.<br />
    I love intelligent-coding, algorithms and logics and<br />
    enjoy playing Cricket and Badminton.<br />
    <br />
    My coding abilities are currently limited Autohotkey and only Autohotkey.<br />
    A listing of my Autohotkey works can be found <a href="Autohotkey.html">here</a>.<br />
    <br />
    You can always visit my <a href="http://www.avi-win-tips.blogspot.com">blog</a> if you are looking for cool tricks and cracks.<br />
    I write original , hard to find content.<br />
    <br />
    <hr><br />
    <h3>My Github Project List</h3>
    <ul>
    <li><a href="https://github.com/Avi-Aryan/Clipjump">Clipjump</a>
    <li><a href="https://github.com/Avi-Aryan/Sublime4Autohotkey">Sublime 4 Autohotkey</a>
    <li><a href="https://github.com/Avi-Aryan/AutoHotKey">Sublime Text Autohotkey Package</a>
    </ul><br />
    <h3>Other Links</h3>
    <ul>
    <li><a href="Autohotkey.html">Autohotkey Scripts Listing</a>
    <li><a href="http://avi-win-tips.blogspot.in/p/my-autohotkey.html">Blog Index</a>
    </ul>
    <br /><br />
    </section>
</div>

    <!-- FOOTER -->
    <div id="footer_wrap" class="outer">
    <footer class="inner">
        <h2><font color="#FFFFFF">Profiles</font></h2>
        <p>
            <a href="http://www.github.com/avi-aryan">Github</a><br />
            <a href="http://www.autohotkey.com/board/user/24563-a-v-i/">Autohotkey Forum</a><br />
            <a href=https://plus.google.com/110328513842183229282">Google +</a><br />
            <a href="http://www.avi-win-tips.blogspot.com">Blog</a>
        </p>
    </footer>



  </body>
</html>

That is said to not work in the question itself, however I tried it again and again it doesn't work. You can see the repo for confirmation. — Avi, Jun 17 '13 at 07:02

Images in github pages and relative links

2 Answers2

Linked