image not appearing in browser - html

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">

Related

HTML Download code will not let me download

<!DOCTYPE html>
<html>
<body>
<p>Click on the w3schools logo to download the image:<p>
<a href="/images/myw3schoolsimage.jpg" download>
<img src="/images/myw3schoolsimage.jpg" alt="W3Schools" width="104" height="142">
</a>
</body>
</html>
ok i gonna try to explain you this with a example, try to the following:
first create a folder in your desktop with the name "TestFolder" then create one folder with the name "images" and create a html file:(if you are in the good way you will have something like this)
then in your html file write the following code:
<!DOCTYPE html>
<html>
<body>
<p>Click on the w3schools logo to download the image:<p>
<a href="../TestFolder/images/soundfile.mp3" download>
<img src="../TestFolder/images/imagefile.jpg" alt="W3Schools" width="104" height="142">
</a>
</body>
</html>
then in your images folder put a image and replace the word imagefile of the html with the name of your image and do the same for the mp3 file(put a mp3 file in the image folder and then copy the name of the file in the word soundfile of the html file)
then open the html file with your browser (second click on the html file "open with" example: firefox) and you will have what you wanted
(even after all this I'm still unsure if this is what you wanted to do )

How can i display images using <img> in simple HTML 5 files?

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://...

Create a hyperlink that opens multiple images in one page using html

How can I create a clickable link that opens multiple images in one page only? I host all my images in photobucket. I was able to create a link to open one image only but not multiple images simultaneously.
Keep all 6 files in same directory
Image1(Name:html1.html)
<html><body>
<img src="/image1.jpg"><br>
</body></html>
Image2(Name:html2.html)
<html><body>
<img src="/image2.jpg"><br>
</body></html>
Image3(Name:html3.html)
<html><body>
<img src="/image3.jpg"><br>
</body></html>
Image4(Name:html4.html)
<html><body>
<img src="/image4.jpg"><br>
</body></html>
Image5(Name:html5.html)
<html><body>
<img src="image5.jpg"><br>
</body></html>
Main html
<html><body>
image1
image2
image3
image4
image5
</body></html>
I am a newbie and just a 12-year old boy.
Apologies for any mistakes
put your images inside a sperated html file like "images.html"
and link the hyperlink to that page
click me
this is HTML sample page: put all images in images folder in the same HTML page root directory
<html>
<head></head>
<body>
<img src="/images/01.jpg"/> <br>
<img src="/images/01.jpg"/> <br>
<img src="/images/01.jpg"/> <br>
<img src="/images/01.jpg"/> <br>
</body>
</html>
Working Example : http://jsbin.com/eluqod/4/
You don't need to be an expert. If you have the basic knowledge of HTML and JavaScript you can do it on your own. The easiest option is to use jQuery framework, it's a less write, do more JavaScript library that makes interactive web design easy.
What you have to do is create a <div> container and put all your images using HTML's <img> now you have to include the jQuery library in your document
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Now use the hide and show or any other effects like FadeToggle, SlideToggle etc. effects (http://api.jquery.com/category/effects/) to toggle hide and show for the image container div. Setup your complete page with the image container and the link, first hide the image container using display:none; and now use the jQuery function to trigger a function on click of that anchor element.
This is the jQuery
$(document).ready(function(){
$('#showimg').on('click',function(){
//Trigger FadeToggle function on click
$('.image-container').fadeToggle();
});
});
And the HTML
<a id='showimg'>Hide/Show Images</a>
<div class='image-container' style='display:none;'>
<img src='images/sample.png'/>
<img src='images/sample.png'/>
<img src='images/sample.png'/>
<img src='images/sample.png'/>
<img src='images/sample.png'/>
</div>
Do remember to add the JavaScript library in your page.
check the code to learn about it: http://jsbin.com/eluqod/4/edit
You have to create different HTML files for all your image sets. You don't only have create the HTML files, you also have to upload those HTML documents online on a server so people can access it from anywhere.
1. Create an HTML file
Open notepad or any plain text editor and paste this in your file
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Your page title</title>
<style type='text/css'>
.image-container {text-align:center;}
img {width:80%;height:auto;display:block;margin:10px auto;border:2px solid black;padding:5px;}
</style>
</head>
<body>
<h2> The first 50 pictures (or whatever title you want)</h2>
<!-- Images below -->
<div class='image-container'>
<!-- Each images are in img tag, put the photobucket images link into the src attribute. Repeat the img tags if you want more images -->
<img src='http://i923.photobucket.com/albums/ad77/kihani_1996/Troll_Face_.png'/>
<img src='http://i923.photobucket.com/albums/ad77/kihani_1996/Troll_Face_.png'/>
<img src='http://i923.photobucket.com/albums/ad77/kihani_1996/Troll_Face_.png'/>
</div>
</body>
</html>
And save it with an understandable name ending with .html [name].html and save type as All Files - Make sure to save the file with encoding UTF-8. Just make the necessary changes and upload it to a server and link it.
Repeat the steps for more other HTML files with different images in it.

Image in Simple HTML

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

Why IMG tag of HTML renders null on Firefox?

<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.