How to insert an image in HTML from a folder

HTML-CSS
1

Hello, I have beeb looking all over google for how to do this and one way that I can’t get to work is.

<img src="/Photos/randompic.png"

In the directions, the guy named it randompic, so I did as well just so it would be easier. But I cant get it to display on the page, any help or suggestions is appreciated. Thanks.

1 Like
2

Where is your code located? On a server? On your desktop? On codepen?

Is the image named randompic.png in the Photos folder?

3

You might be looking for this

<img src="Photos/randompic.png">

with ni

4

is it html file or php file?

5

if it is in html file (such as exaple.html) then save the file and image at the same folder example in desktop… then remove the path and mention file name…

6

I saved the image in a foler named “Extra” on my desktop.(I did change it from “Photos” to “Extra”) I have no idea how to tell if it is an html file or make it one or. I have no clue.

7

I am doing this all on codepen

8

I tried the code you gave me @Tchoukoualeu, all that came up was this56%20PM

9

Also, I am using a macbook, so I don’t know if that would make a difference.

10

That is your issue. You’re images need to be uploaded.

You need to host the image somewhere. Codepen doesn’t like a lot of free services, so if you don’t have webhosting yet, you’ll need to look around if you don’t have a pro account.
Try Cloudinary

Once you have the image hosted, you need to get the URL for the image and put in your img tag. So:

<img src="http://urlhere.com" />
11

Okay, I have used a html image converter before I just thought it might be easier if I learned to upload them from my files. Thank You

12

37%20PM
37%20PM677×548 36.4 KB

Okay this is what I have so far in my test codepen. I am trying to make the picture the backround. I tried

body{background-image:(copy paste link); }

and it won't work. I'm sure that is wrong but I have looked all over w3schools and haven't found something to help.
13

You need more parameters in your css. try:

background: url(image url);
  background-repeat: repeat;
  background-size: auto;
1 Like
14

Hello . If picture wont show up probably there is wrong path to it. You can find more information how it works at this link:
https://www.w3schools.com/html/html_filepaths.asp
If you want embed picture to background you need to write additional parameters . You can find more info at this link:
https://www.w3schools.com/html/html_images_background.asp

15

sir,i tried it for several times but my image is not shown on the web page only an icon representing an image is shown there.

16

If you have a question about a specific challenge as it relates to your written code for that challenge, just click the Ask for Help button located on the challenge. It will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

1 Like