CODEWITHSUNDEEP
htmlcss
J. Doely
J. Doely

Reputation: 29

HTML I want to upload a .jpg image saved onto my desktop

I need to import an image to my html site. And I do not know what code to use. My html coding is in a folder called Nixr. And it is on my desktop. The coffee photo I am trying to upload to the html site is also in the Nixer folder called coffee.jpg.

The code I have tried using:

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

My html coding:

<HTML>

<HEAD> </head>

<BODY style="background-color:powderblue;">

<br> <br> <br>

<style>

div {
border: 1px solid black;
margin-top: 0px;
margin-bottom: 67px;
margin-right: 210px;
margin-left: 1000px;
background-color: powderblue;
text-align: center;
}

</style>
</head>
<body>

<div>
<h2><b>Log In!</b>.</p> 

<form>
Login:<br>
<input type="text" name="username"><br> <br>
Password:<br>
<input type="password" name="psw">
</form>
</p>

<button type="button">Log In!</button> <br> <br>

<b>Sign Up Today!</b>.</p>

<form action="/action_page.php">
First name:<br> 
<input type="text" name="firstname"> <br> <br> 
Last name:<br>
<input type="text" name="lastname"> <br> <br>

<form action="/action_page.php">
E-mail: <br>
<input type="email" name="email"> <br> <br>

<form action="/action_page.php">
Birthday: <br>
<input type="date" name="bday"> <br> <br> 

<form action="">
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other"> Other
</form> 

<p>By clicking Create Account, you agree to our Terms and that you <br> have 
read our Data Policy, including our Cookie Use.</p> 

<button type="button">Create Account</button> </h2>

</div>
</body>
</html>

Upvotes: 0

Views: 2580

Answers (4)

Mohammed Wahed Khan
Mohammed Wahed Khan

Reputation: 898

I guess you should be more often here to know how to ask questions.

Regarding your question,

You need to create a folder of what you are working on. save the files index.html(HTML file) and style.css(CSS file) in that folder. create a subfolder assets where you need to place all your images and .js files. This is the standard I follow.

Now you can easily call the images where ever you need them using the code,

<img src="assets/flower.jpg" alt="flower" style="width:100%">.

src tag will take your image.

alt tag will be the alternative display if the image is not loaded.

width tag will adjust the image where it is placed.

Appreciate if useful.

Upvotes: 0

Ashish sah
Ashish sah

Reputation: 755

Just use this : <img src="name.jpg"> Just use your name and its extension JPG or jpeg. Check the details of the image and if its on the same folder or same place just use the name only.

Upvotes: 0

Prakhar Sood
Prakhar Sood

Reputation: 179

If you want to upload the photo through a form in your folder's directory then you have to use PHP for that.

For uploading the image through a form and displaying it refer to this https://www.w3schools.com/php/php_file_upload.asp

If you are looking to just display it through HTML then you can use this:

<img src="filelocation/filename.jpg" style="height:100px;width:100px;" />

If your file is outside the directory then 

<img src="../filelocation/filename.jpg" style="height:100px;width:100px;" />

Upvotes: 1

Patrick Bentley
Patrick Bentley

Reputation: 492

I dont think you are asking this question right. Unless I am confused. You dont want to drop the photo as much as you want to use the image url to have the computer find the picture for you.

My suggestion is that your index.html should exist in a folder. For this example, the name of that folder is "Site_folder" and your image file is named "coffee.jpg"

You would then use an image tag: 

<img src ="site_folder/cofee.jpg" />

Upvotes: 0

Related Questions