Html github页面中的图片和相关链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17141612/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Images in github pages and relative links
提问by Avi
I created a user's github page.
我创建了一个用户的 github 页面。
Now, suppose I have an Image file at the root of the repo located as Images/Emoticons/Cool.png
现在，假设我在 repo 的根目录下有一个 Image 文件，它位于 Images/Emoticons/Cool.png
I try to insert that image in my main Index.htmlfile.
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
我尝试将该图像插入到我的主Index.html文件中。
我写 -
-<img src="\images\emoticons\cool.png">在线和离线都没有显示
-在线和离线<img src="images\emoticons\cool.png">都没有显示，但我可以离线看到图像
-<img src="..\images\emoticons\cool.png">在线和离线都没有显示
What should be done?
应该做什么？
回答by nulltoken
As the site is being served by Linux servers, the path is case sensitive.
由于该站点由 Linux 服务器提供服务，因此路径区分大小写。
In order to make this work, replace emoticonswith Emoticonsin the provided url.
为了使这项工作，更换emoticons与Emoticons所提供的网址。
The following html code should properly display the image
以下html代码应该可以正确显示图像
<img src="images/Emoticons/cool.png" alt="hi" class="inline"/>
回答by Falguni Panchal
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>
