Test Browser: Version of Chrome: 94.0.4606.81
When I am running the html file it is not showing up instead showing error in console`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image</title>
<link rel="stylesheet" href="/Css/display.css">
</head>
<body>
<div class="box1">
<img src="C:\Users\first\OneDrive\Pictures\Downloaded Pictures\pexels-ella-olsson-1640777.jpg" alt="Cat Image"/>
</div>
<script src="/Js/function.js"></script>
</body>
</html>
Here's the Error Image
You can't just load files from your local disk. You should take the files to the directory with your code and update the path.
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="./home.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img class = "img" src="/download.jpg" alt="images one">
</body>
</html>
I have this html code on my home.html file and the image is not loading on my browser
The image file is i the same folder as the html file. Am I doing something wrong?
According to you, the image file is in the same folder as your HTML file. This means that you are probably linking the image incorrectly. Since the image is in the same folder, you should link it by either:
<img class="img" src="./download.jpg" alt="images one"> <!-- Notice the . before the filename -->
OR:
<img class="img" src="download.jpg" alt="images one">
Either one should work for you.
it is all about your src path you can copy your image's exact path in vs code, right-click on that image you want to show on the web page, copy the relative path and paste in src. Note: sometimes you need to change the direction of \ to this / to resolve the error.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="./home.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img class = "img" src="https://scontent.fkhi2-2.fna.fbcdn.net/v/t1.6435-9/83584368_2640398402913663_8086181498509590528_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=09cbfe&_nc_eui2=AeEj17MLkoima4X0i7rhcW-bOla5rc4Wt-E6Vrmtzha34crlU8ECjYzWPJA5DPQsDhgCQQQazdpg-z8BjOee_Wl4&_nc_ohc=GNVusO-liCcAX_VSOXH&_nc_ht=scontent.fkhi2-2.fna&oh=00_AT9RyzFYP6B_NBbAxuWrvaUCF9KWs-y9NccHcnp3VJgV4A&oe=6231777F" alt="images one">
</body>
</html>
Hi i started learning html a say or two ago and i was just messing around with some features when i thought of making a website which stored my school stuff in a arranged manner then i wanted to make a button that opens a local file but i just couldn't make it happen but i tried searching it on web but nothing worked for me
here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<style>body{background-image: url(x.jpg);
background-size: cover;}
</style> <div id="red">
<button><a src="C:\Users\laksh\Mywebsite\jkoj.html">jkoj</a></button>
</div>
</body>
</html>
don't use src attribute in a tag, use href in place of src
I have written a code using HTML to practise how to add a relative URL to the web page. But it doesn't work properly.
Folder structure for your project.
website(Main folder)
-links.html (html file)
-gb(Sub folder)
-currency-converter.html (html file)
links.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My first website</title>
</head>
<body>
<p>Let's start creating html links.</p>
Visits to I Love PDF
Visits to Currency Converter
</body>
</html>
currency-converter.html file inside the gb folder.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My second website</title>
</head>
<body>
<p>Welcome to currency converter page.</p>
</body>
</html>
I am using SVG icons (from IcoMoon), the problem is I can't see the icons while working locally, but when I upload the page online it works fine.
<!doctype html>
<html>
<head>
<title>SVG Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<svg class="ico ico-menu"><use xlink:href="icons/symbol-defs.svg#ico-menu"></use></svg></td>
<script defer src="icons/svgxuse.min.js"></script>
</body>
</html>
I am not using any local server. It is a plain HTML file. I wonder how can I fix this issue?
Thank You
Stumbled upon the following svg:
https://codepen.io/iliran11/pen/eRPxwG
While im copying the content of the pen into a file liran.svg there are the 2 following scenarios:
opening directly liran.svg with latest chrome - it works perfectly
Importing liran.svg to index.html (code below) - i can see nothing.
Maybe any exaplnation?
index.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<img src="./liran.svg">
</body>
</html>
You did not import properly if it is the same folder with the index.html file use
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<img src="liran.svg">
</body>
</html>
If it is the parent folder of the folder containing index.html use
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<img src="../liran.svg">
</body>
</html>
Take a look a this link to learn more on referencing files in html and css How to properly reference local resources in html