如何使用显示图像 <img> 在简单的HTML 5文件中？

Question

我的问题是我可以在简单的HTML 5文件中使用<img>标签显示图像吗？

我在线和离线使用wampserver尝试了下面显示的test.html文件。 但是结果几乎是一样的。

文件路径是

C:\wamp\www\fluid\SMS\test\test.html
C:\wamp\www\fluid\SMS\test\stack.jpg
C|/Users/aimme/Desktop/stack.jpg

这是test.html

<html>
    <head>
    </head>
    <body>
         <!-- works on internet explorer
         doesn't work on other ff & chrome -->
         <img src="file:///C|/Users/aimme/Desktop/stack.jpg" alt="stack img from my desktop" width="500" height="100"/>
         <!--doesn't work on ie,ff or chrome-->
         <img src="stack.png" alt="stack img from same folder" width="100" height="100"/>
         <!--doesn't work on ie,ff or chrome-->
         <img src="cdn.sstatic.net/stackoverflow/img/apple-touch-icon@2.png" alt="stack img from site" height="100" width="100">
    </body>
</html>

这是结果。

如何在Internet Explorer 11.0.9600.17031版本中看到 在Firefox 40.0.3中如何看待 在Chrome 47.0.2503.0 dev-m（64位）中如何看待

Answer 1

一些东西：

我怀疑Chrome和FF不喜欢"file:///C|/Users/aimme/Desktop/stack.jpg"的竖线字符，这就是为什么它在那里失败的原因。
如果文件名为stack.jpg ，则需要包含.jpg扩展名才能起作用。
您想在远程URL中使用该协议，否则将被视为相对的： <img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon@2.png" alt="stack img from site" height="100" width="100">

Answer 2

请注意，没有结束标记。 这是不使用它们的少数元素之一。

<img src="Desktop/stack.jpg" class="flr" alt="Lake Atitlan, Guatemala" width="300" height="240">

提供图像的相对路径。

有关更多详细信息，请参考以下链接：
http://www.html-5-tutorial.com/image-element.htm

Answer 3

尝试

<img src="stack.jpg" />

文件stack.jpg与HTML文件位于同一目录中。

对于远程文件，请输入完整的URL，即http：// ...

如何使用显示图像 <img> 在简单的HTML 5文件中？

问题描述

3 个解决方案

解决方案1
3 2015-09-12 09:09:59

解决方案2
1 2015-09-12 09:07:04

解决方案3
1 2015-09-12 09:07:32

如何使用显示图像 <img> 在简单的HTML 5文件中？

问题描述

3 个解决方案

解决方案1 3 2015-09-12 09:09:59

解决方案2 1 2015-09-12 09:07:04

解决方案3 1 2015-09-12 09:07:32

解决方案1
3 2015-09-12 09:09:59

解决方案2
1 2015-09-12 09:07:04

解决方案3
1 2015-09-12 09:07:32