When trying to view an index.html file in the browser, it doesn't show any images. I get a broken image icon.
I inspected page and got the following error:
Failed to load resource: net:: ERR_FILE_NOT_FOUND
The image is in an image folder (i.e. images) located in the main folder (i.e. test-site)
I tried on multiple browsers: Firefox, Chrome, Internet Explorer..
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="\test-site\images\japanese.png" alt="My test image">
</body>
</html>
I'm trying to show this image. However, a broken image icon shows but no image...
error: Failed to load resource: net:: ERR_FILE_NOT_FOUND
If the index.html file is inside the test-site folder (main folder), then you do not need to include that in your link as such:
<img src ="./images/japanese.png" alt ="My test Image">
Should work for you, as the dot is representative of the folder you are already in.
Use relative paths.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="./test-site/images/japanese.png" alt="My test image">
</body>
</html>
If the index.html file is inside the test-site folder (main folder), then you do not need to include that in your link as such:
It should work for you
if your image and index.html are on the same folder then
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img src="./images/japanese.png" alt="My test image">
<!-- or ->
<img src="images/japanese.png" alt="My test image">
</body>
</html>
Related
First post here... I'm working on The Odin Project's Foundation course and I'm having some trouble accessing a relative link. The course instructs the student to create a new directory, "pages", within the existing directory, "odin-links-and-images", and create an html file (second portion of code below) in "pages", that is linked in "odin-link-and-images". For some reason, when I open the first portion of code in my browser, it won't link the pages directory. Not sure if I messed something up when creating the new directory, but as soon as I moved the code to "pages", the link appeared missing or broken
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>Homepage</h1>
click me
About
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Odin Links and Images</title>
</head>
<body>
<h1>About Page</h1>
</body>
</html>
this is the code i wrote:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
Click to download!
</body>
</html>
when I click on the text I it doesnt download the file and it only previews it instead of downloading
Can you write me a proper code ? thanks
You are asking for pdf file and in link txt file is given..
anyways.. no prob...
try
<a href="test.txt" target='_blank' download>Click to download!</a>
When I use vscode to add audio and pictures to an HTML file, I use "open with live server" to debug, but every time the pictures and audio are not loaded.
However, when I quit vscode and open it directly with a browser, it can load the pictures and audio normally.
I don't know what the reason is, is there a problem with the vscode?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="referrer" content="no-referrer" />
<title>Document</title>
</head>
<body>
<img src="F:\LABORATORY\HMpy\images\me1.png">
<audio src="F:\BaiduNetdiskDownload\women.mp3" controls ></audio>
</body>
</html>
Please put your audio and image next to your html file and use relative path.
like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="referrer" content="no-referrer" />
<title>Document</title>
</head>
<body>
<img src=".\me1.png">
<audio src=".\women.mp3" controls ></audio>
</body>
</html>
I want to add the "Download on the App Store"-badge. The file I downloaded is a .eps which displays correctly in Safari but not in Chrome.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
</head>
<body>
<a href="https://linktoitunes">
<img class="appstore" alt="Download on the App Store" src="../appstore-badge.eps" /></a>
</body>
</html>
Convert the image to a format more commonly used on the WWW.
Use SVG if you want to continue to use a vector format. Otherwise JPEG for photo-like images and PNG for images where precise reproduction of the original is important.
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>