How can i display images using <img> in simple HTML 5 files?
Question
My question is ow can i display images using <img> tag in simple HTML 5 files?
I tried the test.html shown file below with my wampserver both online and offline. But the result was almost same.
File paths are
C:\wamp\www\fluid\SMS\test\test.html
C:\wamp\www\fluid\SMS\test\stack.jpg
C|/Users/aimme/Desktop/stack.jpg
Here is the 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>
Here are the results.
How this is seen in Internet explorer version 11.0.9600.17031 How this is seen in firefox 40.0.3
How this is seen in chrome 47.0.2503.0 dev-m (64-bit)
3 answers
solution1
3 2015-09-12 09:09:59
A few things:
- I suspect Chrome and FF don't like the pipe character in
"file:///C|/Users/aimme/Desktop/stack.jpg", which is why it fails there. - If your file is named
stack.jpg, you need to include the.jpgextension for it to work. - You want to use the protocol in your remote URL, or it'll be treated as relative:
<img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon@2.png" alt="stack img from site" height="100" width="100">
solution2
1 2015-09-12 09:07:04
Note that there is no closing tag. It's one of the few elements that doesn't use them.
<img src="Desktop/stack.jpg" class="flr" alt="Lake Atitlan, Guatemala" width="300" height="240">
Provide relative path to image.
For more detail please refer following link:
http://www.html-5-tutorial.com/image-element.htm
solution3
1 2015-09-12 09:07:32
Try
<img src="stack.jpg" />
With the file stack.jpg in the same directory as the HTML file.
For remote files put in the complete URL ie http://...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.