Image is not showing in browser using the image tag where am i wrong?
i want to add image in web and i am unable to do it using in visual code i don't know where from image to be added in the URL of image so anyone guide.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign up </title>
</head>
<body>
<div class="Header">
<a href="/" class="LogoWrapper" >
<img src="D:\my-angular-projects\signup-form\src\image\Snap.jpg" alt="Scone O'Clock logo" />
</a>
<p class="Strap">Scones: the most resplendent of snacks </p>
</div>
<div class="IntroWrapper">
<p class="IntroText">
Occasionally maligned and misunderstood; the scone is a quintessentially British classic.
</p>
<div class="MoneyShot">
<img class="MoneyShotImg" src="D:\my-angular-projects\signup-form\src\image\1555932407.jpg" alt="Incredible scones" />
<p class="ImageCaption">Incredible scones, picture from Wikipedia</p>
</div>
</div>
<p>Recipe and serving suggestions follow.</p>
<div class="Ingredients">
<h3 class="SubHeader">
Ingredients</h3>
<ul>
</ul>
</div>
<div class="HowToMake">
<h3 class="SubHeader">Method</h3>
<ol class="MethodWrapper">
</ol>
</div>
</body>
</html>
the problem is that your file retrieves the image based on where the html file is somewhere and it does not check the entire computer hard drive.
So if you want the problem fixed you can start from the html files location basically. So if your html file is in the src folder your img tag shall be
<img src="image/1555932407.jpg">
else if you have your html file in the signup-form folder i shall work with this
<img src="src/image/1555932407.jpg">
Hopefully you found this useful otherwise just comment this post.
Visual Studio Code automatically retrieves files from the root directory, so it lists all of the files for you - making it easier to implement images and other stuff. It's one of the main reasons I use VSCode.
The image location depends on where your HTML file is. Use forward slashes when specifying folders/files, and use ../ to go up a directory.
Related
For some reason, my images are not loading in on my HTML document. I checked the link, and they are all valid. If I command click them it brings up the picture. I am not sure what else to do..
Here is the entire code of the website:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="/Users/evanmullen/Public/images/favIcon.ico">
<title>Algobyte</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght#100&display=swap" rel="stylesheet">
<link rel="stylesheet" href="stylesheet.css">
</head>
<body style="background: #efefef;">
<div class="header" id="mainHeader">
<img src="Users/evanmullen/Public/images/cover.png" alt="algobyte logo" width="20%">
</div>
<div class="app-section">
<h3>Apps</h3>
<!--QuickrTippr-->
<p class="center">
<a href="https://apps.apple.com/us/app/quickrtippr/id1551206999">
<img src="Users/evanmullen/Public/images/WebsiteQuickrTippr.png" alt="QuickrTippr picture" width="20%" class="app-picture"></a>
<!--Identicryst-->
<img src="/Users/evanmullen/Public/images/WebsiteIdenticryst.png" alt="Identicryst picture" width="20%" class="app-picture">
</p>
</div>
<div class="about-us">
<h3>About Us</h3>
<img src="Users/evanmullen/Public/images/bridge.jpg" alt="Bear Mountain Bridge, Cortlandt, NY" width="100%" class="center">
<p class="center">
We are a Hudson Valley, New York based software development company that strives to produce the highest quality software.
</p>
</div>
</body>
</html>
I am using Firebase as my host.
Ok so this is a pretty common thing. It's not displaying because with the instructions you gave your file, the browser cannot find the image....heres what I do...I assume your using VS due to your tag, so inside the folder that your project is made in, upload or open the images you want to the same folder your index.html project is in. Once the images are in the same folder you can just change the name of your images to src="imagename.png" or jpeg or whatever you use. If you dont want the images in the same folder, then just save them to another folder but in the same root folder of your project and copy the relative path name by right clicking and selecting "Copy relative path" and incude that in your image element..it will look somthing like this...src="projects/image.png". I hope that explains it and solves your issue. Happy coding!
<a href="https://apps.apple.com/us/app/quickrtippr/id1551206999">
example ------> if in same folder as index.html <img src="sophoto.png" alt="QuickrTippr picture" width="20%" class="app-picture"></a>
I am using Sublime text to write some HTML and CSS files. I've created my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>RainyDayBakes</title>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 style="text-align:center">RainyDayBakes</h1>
<nav style="text-align:center">
<a href=”C:\Users\sarah\Documents\Simmons\CS-321\page1.html”> About </a>
<a href=”page2.html”> Menu </a>
<a href=”page3.html”> Gallery </a>
<a href=”page4.html”> Order </a>
<a href=”page5.html”> Contact Us </a>
</nav>
<img src="cake.png" alt="oreo crumble cake" class="center">
<h3>Welcome to RainyDayBakes!</h3>
<p>We are a local bakery specializing in creative cakes, cupcakes and cookies!</p>
<p>In addition to being open daily we also offer custom ordered confections.</p>
<!-- Scripts -->
<script src="scripts/index.js"></script>
</body>
<footer>
</footer>
</html>
my page1.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>This is Page One </title>
</head>
<body>
</body>
<footer>
</footer>
</html>
and my style.css:
<style>
h1 {
color:red;
}
</style>
When I try to run index.html in Chrome, the link to page1.html says it doesn't exist, and the CSS won't show up. They're all in the same folder, I've saved all the files, and I'm running on Chrome. Every other solution I've found refers to making a typo, the directories being different, etc. but as said, they're all in the same folder, and I haven't noticed a typo (but it's entirely possible when you're too close to your code).
First off, you're not even using the tag anywhere in your code, so that's why the style isn't showing up. Secondly, if they are in the same folder, just link your about page to page1.html; not the full directory listings.
You are using typographical quotes in your links' href attributes, which won't work. Change those to regular quotes.
Let the link be this way instead href=”page1.html”
You might want to put a link to your CSS file on all your pages, I don't see it on your page1.html You probably already know about this resource but I mention it just in case you don't: W3 Schools is very handy for a quick reference to a lot of HTML/CSS questions.
So you have two issues:
For page1.html, would suggest adding file:// or file:/// to the beginning of the href element, or maybe retyping the line since the other links worked
For your CSS, remove the tag, it's for when you put the style inside the HTML file(embedded)
This isn't an issue with your code. I was having the same exact problem too and i recently discovered that the problem likely lies in the IDE that you're using. I was using stackblitz and recived the same output. But when i switched to an online compiler and litteraly copy & pasted the code with the same file names, the code started working correctly. Try using an online compiler and see how that works out for you. It worked for me.
The compiler I used is:
https://www.onlinegdb.com/
make sure to switch the languate to HTML using the language dropdown on the top right corner.
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 learning CSS through the Mozilla Developer Network. I save through Codeanywhere and Dropbox.
My CSS and image are not showing up when I download it. I've checked code, directories and Github examples and still nothing. Any ideas would be appreciated. This is the problem area:
<!DOCTYPE html>
<html>
<head>
<link href="styles/style.css" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<title>My test page</title>
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
</head>
<body>
<h1>
Another Attempt at Coding
</h1>
<img src="HP-Firefox-icon.png" alt="The Firefox logo">
<p>
What is your website about? </p>
<ul>
<li>Do you like dogs, New York, or Pacman?
</li>
<li>What does your website look like</li>
<li>What's the background color?</li>
<li>What kind of font is appropriate: formal, cartoony, bold and loud, subtle?</li>
</ul>
<p>
Read the Mozilla Manifesto
</p>
The path for CSS and image is not correct. Make sure the CSS and image file name is located in same directory and having the same name.
<img src="HP-Firefox-icon.png" alt="The Firefox logo">
<link href="styles/style.css" rel="stylesheet" type="text/css">
It will only work if you find the correct url for the source files and put it. If you downloaded the example, then make sure all files are downloaded.
I’m just trying to insert an html absolute link to my texteditor on Mac and I get this on the browser url:
file:///Users/yasser/Desktop/211Website/Labs/https://delicious.com/jodi.reed/browsers...
and file not found in Firefox or Chrome or Safari. When I delete the path before the http the page opens fine...
The code is below-
<!DOCTYPE html>
<html>
<!-- Lab2 Yasser Abdelhalim -->
<head> <meta charset="UTF-8">
<title> Lab2 Yasser Abdelhalim </title>
</head>
<body>
<h1> Yasser’s Web Development resources </h1> this is description for heading number one
<div>
<h2> Background </h2>
<ul>
<li><a href=“delicious.com/jodi.reed/browsers”>link</a></li>
<li><a href=“delicious.com/jodi.reed/browsers”>link</a></li>
<li><a href=“delicious.com/jodi.reed/browsers”>link</a></li>
</ul>
<h2> Web programing </h2>
<ul>
</div>
</body>
</html>
I think (without seeing anything else) you just need to add the initial part of your URLs, as your ocmputer is thinking they're local, relative files (in the same directory as the file with this code in).
Try using this code:
<!DOCTYPE html>
<html> <!-- Lab2 Yasser Abdelhalim -->
<head>
<meta charset="UTF-8">
<title>Lab2 Yasser Abdelhalim</title>
</head>
<body>
<h1>Yasser’s Web Development resources</h1> this is description for heading number one
<div>
<h2>Background</h2>
<ul>
<li>
link
</li>
<li>
link
</li>
<li>
link
</li>
</ul>
</div>
</body>
</html>
Try typing the full address in here, including speech marks (double quotes).. sometimes when copying and pasting URLs it copies the formatted speech marks from some fontstyles.
Apache is the webserver that runs on Linux, it pretty much is a foundation or base of every website around (with some exceptions).
Are you using Windows or Mac? You would be better to be working in a proper web server environment (I can explain)