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)
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 .jpg extension 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">
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
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 i.e. http://...
Related
I have a website with AMP pages that allow editors to add images to the page. The images are displayed using an amp-img element and render in any normal browser.
When either user a reader view or being crawled by a site such as Embedly the amp-img elements are not displayed.
I assume this is caused by the amp-img element not being a valid HTML element so is ignored. Is there anyway to get around this issue?
You can add a noscript element for renderers not using javascript:
<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800">
<noscript>
<img src="welcome.jpg" alt="Welcome" height="400" width="800" />
</noscript>
</amp-img>
I had left out the head tag of <script async src="https://cdn.ampproject.org/v0.js"></script> as listed in the documentation. Including that fixed it.
This should be so easy, but I'm missing something? somewhere?
I create an html script (test.html) located on a remote server.
<!DOCTYPE html>
<html>
<head>
<title>Testing IMG</title>
</head>
<body>
<img src="img/ErrorTracking.png" alt="Error Tracking" height="180" width="860">
</body>
</html>
File Structure
I've double checked and ErrorTracking.png is in fact the name of the image.
When I'm in my local browser and try to view the image it doesn't appear.
What am I missing? I've spent way to long on this simple task.
Try adding / or ~/ in your image source.
<img src="/img/ErrorTracking.png" alt="Error Tracking" height="180" width="860">
Check out this link for more details on urls in html.
On the server, relative to your test.html, is the image in a folder called img? Also, check the case, make sure you capitalized the file name and directory correctly.
If the html file is there, you should be able to take your html url:
http://www.yoursite.com/somewhere/test.html
and swap out the file name with img/ErrorTracking.png like this:
http://www.yoursite.com/somewhere/img/ErrorTracking.png
If that URL doesn't show the image when visiting it in your browser, the image is in the wrong location.
try this instead
<img src="/img/ErrorTracking.png" alt="Error Tracking" height="180" width="860">
try this
<img src="~/img/ErrorTracking.png" alt="Error Tracking" height="180" width="860">
if that doesnt helps
<img src="/img/ErrorTracking.png" alt="Error Tracking" height="180" width="860">
I am trying to use a SVG and nothing is being displayed. The png version of the file works as expected.
<img src="typewriter.svg" alt="typewriter svg">
I have searched and there seems to be a issue with chrome and SVGs but I don't think thats the issue here.
Here is how it should work:
<object data="typewriter.svg" type="image/svg+xml">
<img src="typewriter.png" />
</object>
which is ideal place to place image in NEtbeans for HTML
enter code here
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Android Stuff</title>
</head>
<body>
<img src="WEB-INF/SC20111215-165000 (1).png" width="240" height="400" alt="SC20111215- 165000 (1)"/>
</body>
< /html>
<img alt="" src="img/header960.png" align="center" >
Copy the image in the folder where the html file is present.
And change the html code to :
<img src="SC20111215-165000 (1).png" width="240" height="400"/>
Normally this kind of issues occurs when
Path given is wrong
Name of image is wrong
Extension of image file is wrong
Check the above possibilities. If these 3 are correctly given,
then try with another image with simple name in same folder where the html file is present.
Try changing the name of the image and also its path if possible... Because in most cases these things makes trouble...
<img src="newimagenamewithoutspace.png" width="240" height="400" alt="newimagenamewithoutspace"/>
And if the image has been posted by a use from front end then try to change the image name in your backend code..
This should help you..
Vote up or accept if it works
<img src="test.png" width="240" height="400" alt="test">
see more Attribute in http://www.w3schools.com/tags/tag_img.asp
<html>
<body>
<img id="j_id58" width="800" border="0" height="400" src="c:/test/tmp/imageEE3A7BA3F55BC67061FD778F1B0136D6.png"/>
</body>
</html>
Why does this not render any image when I open it on firefox but does it on IE 6?
I bet this will work if you use a file:// URL instead of a filename.
<html>
<body>
<img id="j_id58" width="800" border="0" height="400"
src="file:///c/test/tmp/imageEE3A7BA3F55BC67061FD778F1B0136D6.png"/>
</body>
</html>
Try that.
Firefox doesn't support using the "C:/"-style path.
Instead use a relative URL or a real URL to that file hosted by a web server.
IE6 does support this.
Firefox requires the "file:///"-prefix when referencing local files.
In addition to the answers above, this is likely to fail if you load your HTML from an HTTP server.
This is likely because you need a src attribute with a file:\\ scheme.
Try file:///C://test/tmp/imageEE3A7BA3F55BC67061FD778F1B0136D6.png in the src and see if it works.