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" />
Related
I am trying to upload this Image from my computer to a web page. But, it won't upload.
used different paths, however when I use (bit.ly/fcc-relaxing-cat(link)) in my src, it does load up the picture.
<!DOCTYPE html>
<html>
<!--
<head id="main">
</head>
-->
<div id="main">
<title>Dr. Norman Borlaug</title>
</div>
<body>
<h1 id="title">Dr. Norman Borlaug</h1>
<div id="img-div">
<img
src="C:\Users\corne\Desktop\FreeCodeCampProjects\Project1\images\norman.jpg" alt="A man holding a crop">
</div>
</body>
</html>
it show a picture of a man holding a crop.
Clients usually can't request local file system.
If you want to use absolute path you should do something like this:
<img src="http:\\localhost\img\picture.png"/>
Remember to add your image to the root folder.
I am using the following code to attempt to place an image of myself into my personal website:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<center>
<img src = "/photos/mainphoto.jpg" alt = "Test Image"/>
<h1>My Page</h1>
<hr />
<p> To be updated.</p>
</center>
</body>
</html>
The photos directory is in the same directory as the html page. I have tried placing the photo in the same directory as the html page and it doesn't work. I have tried using .JPG instead of .jpg. I have tried executing the code without the alt tag. I have tried using backslashes instead of forward slashes in the file path. I have looked for typos in the filename and there are none. I feel like my current code should be working with no problems. But the image will absolutely not show up. Any ideas or help would be greatly appreciated.
EDIT: I have corrected the code above to fix an elementary mistake, namely including the body inside of my head instead of separating the two. The picture still does not show.
The HTML structure needs to be:
<html>
<head>
</head>
<body>
</body>
</html>
You are putting the body tag inside the head tag.
Also, if the images directory is in the same one than the html, you need to remove the first slash, just use photos/mainphoto.jpg
So you can try:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<center>
<img src="photos/mainphoto.jpg" alt="Test Image"/>
<h1>My Page</h1>
<hr />
<p> To be updated.</p>
</center>
</body>
</html>
Also I recommend you not to use any spaces before or after the equal signs, these are good practices.
Well, your code is like this
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<body>
<center>
<img src = "/photos/mainphoto.jpg" alt = "Test Image"/>
<h1>My Page</h1>
<hr />
<p> To be updated.</p>
</center>
</body>
</head>
</html>
You have <body> element inside your <head> element.
It should be like this
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<center>
<img src = "/photos/mainphoto.jpg" alt = "Test Image"/>
<h1>My Page</h1>
<hr />
<p> To be updated.</p>
</center>
</body>
</html>
And for that image, the address must start from your html file.
So if you have structure like this
web/
index.html
photos/
cutePuppy.png
You will have <img src="photos/cutePuppy.png" alt="Cute puppy">
Try using the full path of the image listed in its properties.
FIXED
In the Windows 10 filesystem, the picture file extensions are evidently hidden. I had named the picture "mainphoto.jpg", without realizing that the Windows 10 filesystem had already automatically added a .jpg extension, which was hidden in the file structure. Therefore, the name of the file being referenced was actually "mainphoto.jpg.jpg".
Apologies for the silly mistake, and thank you to everybody who offered suggestions!
Does it show as 404(not found) in the web inspector of the browser you are using. Chances are that the folder with the image and possibly the image it self don't have permissions great enough to allow access. You will have to change the permissions via terminal or possible in the editor(IDE) you are using.
I am trying to make a webpage using HTML, JavaScript and CSS but my image files wont display. I have my img folder in the same folder that the html file is in.
I want to display the undecorated tree and then when the user clicks the button to display the other image but it is only displaying the images alt message.
<!DOCTYPE html>
<html>
<title>
Christmas
</title>
<body>
<h1>Lets decorate this chritmas tree!</h1>
<button onclick="document.getElementById('xmasTreeImage').src='decoratedtree.jpg'">Decorate the tree</button>
<img id="xmasTreeImage" alt="Can't display" src="undecoratedtree.jpg" style="width:100px">
<button onclick="document.getElementById('xmasTreeImage').src='undecoratedtree.jpg'">Take away the decorations</button>
</body>
</html>
update:
<!DOCTYPE html>
<html>
<title>
Christmas
</title>
<body>
<h1>Lets decorate this chritmas tree!</h1>
<button onclick="document.getElementById('xmasTreeImage').src='C:\Users\Me\Documents\ChristmasWebProject/decoratedtree.jpg'">Decorate the tree</button>
<img id="xmasTreeImage" alt="Can't display" src="C:\Users\Me\Documents\ChristmasWebProject/undecoratedtree.jpg" style="width:100px">
<button onclick="document.getElementById('xmasTreeImage').src='C:\Users\Me\Documents\ChristmasWebProject/undecoratedtree.jpg'">Take away the decorations</button>
</body>
</html>
If i add in the exact directory it displays the images but surely there is a more efficient way to do this? Also it is not displaying anything when I click the buttons it only shows the image before I click buttons.
I was able to display an image by typing in the specific directory. See my question edit for code.
For some reason, despite using the right syntax(to my knowledge) and having the image file in the same folder as my HTML document, when I load the document, the image I programmed to load does not appear on the page. What could be the issue here?
Here, my HTML file is clearly in the same folder as my image..
https://gyazo.com/ac35ed711716d9e8c5b34123f80d71d1
And here is my code (this is for q3.html)
<!DOCTYPE html>
<html>
<head>
<title>Question Three</title>
</head>
<body>
<p>
<h1>Dominos Pizza order form</h1>
<img src=“dominos.png” alt=“Dominos logo” width=“100” height=“50”>
</p>
</body>
</html>
I am running this on a Macbook Pro, using TextEdit as my editing tool. Here is what my page looks like after I open the document:
https://gyazo.com/0a527e90897d082b1f722c3293ad34d0
Notice “ in your <img>. It is not the actual quotes. Thus replace “ with ".
Thus the new HTML would be as follows
<!DOCTYPE html>
<html>
<head>
<title>Question Three</title>
</head>
<body>
<p>
<h1>Dominos Pizza order form</h1>
<img src="dominos.png" alt="Dominos logo" width="100" height="50">
</p>
</body>
</html>
Image stored outside webroot not getting displayed.
Below is the code snippet:
<html>
<body>
<img src="/Applications/XAMPP/im/tesla.jpg" alt="TESLA">
</body>
if /Applications/XAMPP/htdocs/yourwebsite go
2x back to get in xampp folder and then follow folder that you need
<html>
<body>
<img src="../../im/tesla.jpg" alt="TESLA">
</body>
</html>