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
Related
I am making a new web page, and has been a while since I written any code. my issue is that I am trying to use a picture as part of the page and have also as my email link. can someone please check my code and tell me what I am doing wrong, the picture works but it doesnt do anything when I load the site to my host. the back ground picture works fine but the slot is the one I am having issues with here is what I have:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="flavicon icon" href="http://carymcclure.com/favicon.ico" />
<style>
body {
background-image: url(../img/background.gif);
background-repeat: no-repeat;
}
</style>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Cary McClures' Portfolio</title>
<!-- Bootstrap -->
<link href="../css/bootstrap-4.4.1.css" rel="stylesheet">
</head>
<body background="../img/background.gif" class="embed-responsive">
<a href: mailto:chef#carymcclure.com>
<img style="float:right; margin-right:150px; margin-top:350px"
<img src="../img/slot.gif" width="216" height="89" alt="email"/></a>
</body>
</html>
also having issue with my code for the flavicon - doesnt load..
any help would be greatly appreciated.
You have a typo in your anchor tag:
<a href: mailto:chef#carymcclure.com>
<img style="float:right; margin-right:150px; margin-top:350px"
<img src="../img/slot.gif" width="216" height="89" alt="email"/></a>
That href is not valid. href is an attribute, so the syntax is
content here
MDN reference
You also have two image tags, with the first one being incomplete. Not sure what you're trying to do there.
For your code, that means something like this should work (slightly formatted, so that you can see the changes a bit better):
<a href="mailto:chef#carymcclure.com">
<img
style="float:right; margin-right:150px; margin-top:350px"
src="../img/slot.gif"
width="216"
height="89"
alt="email" />
</a>
I eliminated one image tag, assuming that there was only supposed to be one image with a picture of your email address (not a great idea, and I'm not sure why you're doing that, but that's a long discussion that belongs somewhere else).
You might have issues with the image itself rendering; that local path has to resolve relative to where the email message is stored once retrieved. You probably need to make that an absolute link to where it resides on your server, or read up on embedding images in your message (for example) and adjust the path accordingly.
In fact, you have 2 typos issues in your code.
Missing = sign in href attribute of the tag.
First <img> tag has no ending tag.
Please check the correction below.
<body background="../img/background.gif" class="embed-responsive">
<a href="mailto:chef#carymcclure.com">
<img style="float:right; margin-right:150px; margin-top:350px"/>
<img src="../img/slot.gif" width="216" height="89" alt="email"/>
</a>
</body>
I am trying to put a image onto my HTML code, but it does not show anything
I have tried using full file paths for the src attribute and deleting the width attribute. This is my full code:
<!DOCTYPE html>
<html>
<head>
<title>Rattlesnake - Help</title>
<link type="text/css" rel="stylesheet" href="styles.css" />
<meta charset="utf-8" />
</head>
<body>
<header>
</header>
<main>
<img src="file:///F:/Python/Rattlesnake/rattlesnake.org/Rattlesnake.png" alt="The Rattlesnake logo" width="200px" />
</main>
<footer>
</footer>
</body>
</html>
styles.css, help.html(this file) and Rattlesnake.png are in the same folder.
for the img tag, I have also tried <img="Rattlesnake.png" alt="The Rattlesnake logo" />
I know there are similar questones like mine, but none help me. Please help!
PS F: is a external drive
Always avoid src paths starting with file:// because they would only work on your computer and wouldn't work on a real website because the server's filesystem is different than yours.
The thing you "have also tried" has a small mistake which prevents it from working. Instead of:
<img="Rattlesnake.png" alt="The Rattlesnake logo" />
It should be:
<img src="Rattlesnake.png" alt="The Rattlesnake logo" />
You can only assign values to attributes in HTML, not the img word itself.
I want to be able to use images in a separate folder for my web page, however when I run the page, the image fails to appear. Previously I had the image I wanted to use in the same place a the web page and that worked fine, however once I placed the image in a folder and tried to run the web page, the image no longer showed. I have checked to make sure I have made sure that I have spelt files and folder correctly that I have the correct path, I have also tried adding ../ to the front, but that didn't work. Many thanks for any help.
<!DOCTYPE html>
<html>
<head>
<title>title goes here</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Content goes here</p>
<img src="/Art/Head_Drawings.jpg" alt="Heads_examples" width="104" height="142"></img>
</body>
</html>
Try following code:
<!DOCTYPE html>
<html>
<head>
<title>title goes here</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Content goes here</p>
<img src="Art/Head_Drawings.jpg" alt="Heads_examples" width="104" height="142"></img>
</body>
</html>
You have the image tag wrong. It's one of those self-closing tags in HTML.
<img src="" ... /> or <img src="" ... > is all you need for an image to show up.
if the image is a directory at the same level as your HTML page, you don't need the leading /.
Here is the correct way to add your image to the page:
<img src="Art/Head_Drawings.jpg" alt="Heads_examples" width="104" height="142" />
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://...
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">