I have this code:
<!DOCTYPE html>
<html>
<head>
<h1 title="First Heading">Heading 1</h1>
<h6 title="Second Heading">Heading 2</h6>
</head>
<body>
<p title="First Paragraph">Paragraph 1</p>
<p title="Second Paragraph">Paragraph 2</p>
<a href="https://www.w3schools.com/html/html_basic.asp" >W3schools</a>
<img src="C:\Users\yorda\OneDrive\Gambar\Aseprite\.jpeg\Canyon.jpeg" alt="Pixel Art" width="320" height="180"
</body>
</html>
If I open my html file via file explorer (double clicking it and go to chrome) it will show the image.
but if I want to preview my html file via VS Code extension the image wont show up.
why is this happen? any way to solve this?
Thanks in advance.
You have to put the image in the same location of your index.html file.
then modify your img src to
<img src="Canyon.jpeg" />
Related
I just launched a very simple site with 5 images. 4 of the images do not show up regardless of the path in the img tag. The 5th image always shows up regardless of the path in the img tag.
I have tried "images/imagename.jpg", "/images.imagename.jpg", "../images.imagename.jpg".
I have tried putting images in root and using src="imagename.jpg".
The images that don't show up have this warning in the console:
Here is the current code:
http://avalynncirce.com/perduco
<!DOCTYPE html>
<html>
<head>
<style>
img {max-height: 100vh;}
</style>
</head>
<body>
<div style="width:20%; float:left; position: fixed;">
<nav>
<ul>
<li>Workflow v1 Scatterplot</li>
<li>Workflow v1 Menu</li>
<li>Workflow v2 Scatterplot</li>
<li>Collaboration Tool: Sketch (MAC and Online)</li>
<li>Collaboration Tool Tool: Figma (Windows)</li>
</ul>
</nav>
</div>
<div style="width:75%; float:right;">
<section id="sv1">
<hr style="margin: 50px;">
<img src="/images/scatterplotv1.png">
</section>
<section id="mv1">
<hr style="margin: 50px;">
<img src="../images/menuv1.png">
</section>
<section id="sv2">
<hr style="margin: 50px;">
<img src="../images/perduco.png">
</section>
<section id="mt">
<hr style="margin: 50px;">
<img src="../images/perduco-sketch.png">
</section>
<section id="mt2">
<hr style="margin: 50px;">
<img src="../images/figma.png">
</section>
</div>
</body>
</html>
Keep Your Folder look like this. and try below HTML for Image.
<img src="images/logo.png" alt="logo"/>
"../images/imagename.jpg" will look for it in your root folder (or one folder up from "/images").
I always use "./images/imagename.jpg" and it always works.
Your browser might be caching images incorrectly. Try opening developer tools (if using chrome) choosing the network tab and disabling cache when dev tools are open.
Otherwise, check your console in dev tools for possible errors as to why they aren't showing.
This has never occurred before and I'm not sure why it occurred this time, but the image files in question were set to private. I use Filezilla for uploading files. A right-click on the server image brought up a menu where I could change the privacy settings.
I'm having trouble getting some images to show. The issue starts at C:\Users... and ends at .\august19\google2.0.0.jpg
I'm not very experienced with the ... thing in pathways
I've tried but it doesn't work. A large space appears but image doesn't show
<html lang="en">
<head>
<title>My First Webpage</title>
</head>
<body>
<p style="background-color: blue; color: white">
My First Paragraph <br>
My second sentence in this paragraph on another line
</p>
<p style="background-color: green; color: white"> My Second Paragraph >:3c</p>
C:\Users\sierr\OneDrive\Documents\html practice due tuesday\images\google2.0.0.jpg
https://www.google.com/images/google2.0.0.jpg
.\images\google2.0.0.jpg"
.\august19\google2.0.0.jpg"
<a href="https://www.apple.com">
<img src="images/23656.png" width=500 border=0 />
</a>
Home
August19
</body>
</html>
In order for the browser to render the image, you need to put it in an <img> tag.
<img src="C:\Users\sierr\OneDrive\Documents\html practice due tuesday\images\google2.0.0.jpg https://www.google.com/images/google2.0.0.jpg">
body { background-color: bisque;
}
<!DOCTYPE html>
<html>
<head>
<title>Reading</title>
</head>
<body>
<h1>
<button>Home</button>
<button>Reading<br/></button>
<button>Coffee</button>
</h1>
<div>
<h1>I usually drink three to four cups of coffee on weekdays</h1>
<img src="cof1.JPG" height="171" width="294"
alt="Coffee"/>
<img src="cof2.JPG" height="168" width="300"
alt="Coffee"/>
<h2>Some of my favorite coffees are: </h2>
<OL>
<LI> Cafe Crema</LI>
<LI>Yaucono</LI>
<LI>Arabigo</LI>
<LI>Cafe Lareño</LI>
<LI>Mami</LI>
</OL>
</div>
</body>
</html>
I have tried many styles to see what's wrong, but I can't seem to change the background color. This webpage works, but it's just plain. I am required to use CSS in order to compare both styles.
I copy and paste you're code and its working fine
i guess the problem is that you didn't refresh the page
try to do hard reload
CTRL+ F5 or in mac command+R
It actually does. I edited your question so it should be a snippet, and it worked in your source too. The only change I made was to change the p tag into div tag since p tag is meant for a paragraph, and what you wanted is a block.
Look how I changed the background color to blue:
body {
background-color: blue;
}
<!DOCTYPE html>
<html>
<head>
<title>Reading</title>
</head>
<body>
<h1>
<button>Home</button>
<button>Reading<br/></button>
<button>Coffee</button>
</h1>
<div>
<h1>I usually drink three to four cups of coffee on weekdays</h1>
<img src="cof1.JPG" height="171" width="294"
alt="Coffee"/>
<img src="cof2.JPG" height="168" width="300"
alt="Coffee"/>
<h2>Some of my favorite coffees are: </h2>
<OL>
<LI> Cafe Crema</LI>
<LI>Yaucono</LI>
<LI>Arabigo</LI>
<LI>Cafe Lareño</LI>
<LI>Mami</LI>
</OL>
</div>
</body>
</html>
Maybe the page is not refreshing right
PRESS Ctrl + F5
Note:All my files are in the same directory.
I wrote a simple HTML to display the image.
<html>
<body>
<div style="margin:0 auto; width:100%; text-align:center;">
<p style="font-size:xx-large; font-weight:900;">My homework test</p>
<!--Load a image-->
<img src="mini.jpg" />
</div>
</body>
</html>
When i open this html directly, it can display the image correctly.
But when I try to use my node.js server to open the html, it cannot show the image.
I am completely new to Web Development, still a student. Kindly bare this extremely low level question.
I have this small HTML code:
<html>
<body>
<img scr="logo.jpg" alt"nextgen logo" width="370" height="100" />
<h1> NEXTZEN </h1>
<p> Welcome to NEXTZEN </p>
</body>
</html>
with the logo.jpg file in the exact same folder as the .html file, with the exact width and height given.
Yet, when I open the HTML page, I am not able to see the image at all. What's Wrong? What should I do?
simple typo. src, not scr
<img src="logo.jpg" alt="nextgen logo" width="370" height="100" />
<html>
<body>
<img src="logo.jpg" alt="nextgen logo" width="370" height="100" />
<!-- fix src and add in the = on the alt tag !-->
<h1> NEXTZEN </h1>
<p> Welcome to NEXTZEN </p>
</body>
</html>
You need to change scr to src in your image tag, and add an = sign as Florian pointed out.