为什么使用<img/>无法显示照片？

Question

我正在创建一个文本和图像的div，所以它们是并排的。当我使用标签时，照片将无法显示。这是我用相机拍的照片。它是高分辨率;不过，这应该不重要。当我在其位置尝试其他照片文件时，它们工作正常。另一个奇怪的事情是来自同一组的其他照片不起作用（例如me1.jpg，me2.jpg）。我试过“../images/People/me4.jpg”和“/images/People/me4.jpg”无济于事。求助。

 <article>
   <section>
     <img src="images/People/me4.jpg" />
     <p> this is some sampel text about peole 
     and blah the ateh te as;ldk aldjfs al;sdk
     a;slkd asd;ljfa;lsjd a;dljfa dkfei teh ie
     </p>

   </section>
</article>

---

 article {
 width: 440px;
 padding-left: 20px;
 }

section {
width: 430px;
background: white;
}

section > img {
float: left;
width: 170px;
height: 200px;
}

Answer 1

您的问题可能出现在＆＃34; CSS＆＃34; （因为你只发布了一部分CSS无法检测），作为＆＃34;路径＆＃34;该文件（更有可能），我建议：

HTTP和文件之间的差异

首先，您必须了解"http protocol"和"file protocol"之间的差异。

HTTP协议：

HTTP在客户端 - 服务器计算模型中用作请求 - 响应协议。例如，web浏览器可以是客户端，并且在托管网站的计算机上运行的应用程序可以是服务器。客户端向服务器提交HTTP请求消息。服务器提供诸如HTML文件和其他内容之类的资源，或代表客户端执行其他功能，向客户端返回响应消息。响应包含有关请求的完成状态信息，还可能在其消息正文中包含请求的内容。

文件协议：

文件URI方案是RFC 1630和RFC 1738中指定的URI方案，通常用于从一台计算机中检索文件。

开发人员工具

其次，您需要了解＆＃34;开发者工具＆＃34; （网络标签），您可以使用开发人员工具检测＆＃34;路径＆＃34;从你的形象和问题＆＃34; CSS＆＃34; （如果是你的问题）。

使用Chrome中的开发者工具（如Webkit）：

https://developer.chrome.com/devtools#improving-network-performance

例如：

从Firefox使用：

https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor

实施例：

如果您正在开发＆＃34; html＆＃34;我建议您为了将来在网站/主页中使用，请始终使用＆＃34; http＆＃34;，＆＃34; http＆＃34;在您的机器上使用：

• http://www.wampserver.com/en/（windows，apache，php，mysql）
• https://www.apachefriends.org/（跨平台，apache，php，mysql，珍珠）
• http://nodejs.org/（javascript for network，async server :)）
• http://fatfreeframework.com/home（框架php，不需要apache in＆＃34;开发人员＆＃34;）
• https://www.djangoproject.com/（python + web framework）

Answer 2

首先尝试将图像放在HTML所在的同一文件夹中。并且只需使用

 <img src="me4.jpg" />

如果您在HTML页面上看到图像然后将图像文件粘贴到其原始文件夹，然后右键舔图像以复制图像文件的确切位置并将其粘贴到img标签中的图像的src中 如

 <img src="d:/folder/new/me4.jpg" />

图像的源位置可能存在问题