How to insert an image in HTML from a folder

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

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

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

You might be looking for this

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

with ni

is it html file or php file?

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…

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.

I am doing this all on codepen

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

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

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="" />

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

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.

You need more parameters in your css. try:

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

Hello . If picture wont show up probably there is wrong path to it. You can find more information how it works at this link:
If you want embed picture to background you need to write additional parameters . You can find more info at this link:

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.

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