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>
Related
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.
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 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 am new to coding and have constructed a simple site with html and css. I attempted to add a picture from my local computer to the site. The picture file was placed into the same folder as my html and css files. However, when my page loads, the picture does not show up. Why might this be? this is my html code. Suggestions on what might be wrong are greatly appreciated.
<head>
<link rel="stylesheet" type="text/css" href="myStyle.css"/>
<title>My Professional Site</title>
</head>
<body>
<h1>Jon Doe</h1>
<h2>Learning to code.</h2>
<img src = "IMG_0523.jpg" alt="Sorry No Picute Available" style="width:300px;height:300px;">
<p>"Trying to learn to code." </p>
<footer>Contact Info: jd#mail.com 555-5555</footer>
</body>
</html>
Directory structure 1
Root
images
IMG_0523.jpg
index.html
Access it with images/
<img src = "images/IMG_0523.jpg" alt="Sorry No Picute Available" style="width:300px;height:300px;">
Directory structure 2
Root
IMG_0523.jpg
index.html
Then access it directly
<img src = "IMG_0523.jpg" alt="Sorry No Picute Available" style="width:300px;height:300px;">
Directory structure 3
Root
images
IMG_0523.jpg
pages
index.html
Then access it with ../images/
<img src = "../images/IMG_0523.jpg" alt="Sorry No Picute Available" style="width:300px;height:300px;">
Use relative path instead
Try the absolute path of the image, rather than relative path to the image. absolute paths look something like this. C:\images\IMG_0523.jpg
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.