2013-06-17 11 views
21

Stworzyłem stronę github użytkownika.Obrazy na stronach github i odnośnikach względnych

Teraz załóżmy, że mam plik obrazu w katalogu głównym znajduje repo jako Images/Emoticons/Cool.png

próbuję wstawić ten obraz w moim głównym Index.html pliku.
piszę -
- <img src="\images\emoticons\cool.png"> i nic nie pokazuje się online i offline
- <img src="images\emoticons\cool.png"> i nic nie pokazuje się w Internecie ale widzę obrazem offline
- <img src="..\images\emoticons\cool.png"> i nic nie pokazuje się online i offline

Co powinno być zrobione?

+0

Jeśli próbujesz połączyć z GitHub stron do obrazu w głównym repo, trzeba użyć „raw "absolutnie link. Możesz to osiągnąć, przechodząc do obrazu w głównym repozytorium, klikając surowe, a następnie kopiując ten URL. –

Odpowiedz

24

Gdy witryna jest obsługiwana przez serwery Linux, ścieżka jest wielkość liter.

Aby to zadziałało, należy zamienić emoticons na Emoticons w podanym adresie URL.

enter image description here

Poniższy kod html powinien poprawnie wyświetlać obraz

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

Działa! Wielkie dzięki – Avi

+3

Inną kwestią, o której należy pamiętać, dla przyszłych odwiedzających, jest użycie przedniego ukośnika '/' a nie tylnego ukośnika '' \ '' – merlinpatt

0
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> 
+0

Mówi się, że nie działa w samym pytaniu, jednak próbowałem go raz za razem nie działa. Możesz zobaczyć repozytorium w celu potwierdzenia. – Avi

Powiązane problemy