I’m working on my first project, “Creating a Tribute Page”, and I’m having trouble inserting an image.
I currently have a folder on my desktop called “HTML”, in the folder I have a folder named “img”, and in the folder I have the picture named “Coltrane.jpeg”
And this is my code attempting to insert the picture:
<h2>John Coltrane Picture</h2>
<img src= "Coltrane.jpeg" alt="Coltrane Explaining a Concept to Albert Ayler">
I’m not really sure how to connect the folder to the code itself. Is the name of the photo all I need? What do you think I’m missing?
Where is the file containing the above html located in relation to the folder named HTML?
Where are you testing this code? Code pen? On your desktop?
on your desktop it would be:
<img src= "img/Coltrane.jpeg" alt="Coltrane Explaining a Concept to Albert Ayler">
but that will only work on a website if you use the same structure. if you’re using Codepen you’ll need to host the image and paste the whole URL.
If I understand your question correctly, I have a folder on my desktop called HTML, within that I have a folder named “img”, and within that I have the picture titled “Coltrane.jpeg”
I’m testing it on Codepen, so I need to paste the whole URL. Would I do it like
So I assume the file named index.html is in the HTML folder? If so, then @Tirjasdyn’s recommendation is what you need to do.
Sorry, I would put the URL in a img tag? Like I would just have the src point to the URL?
You can only use images hosted somewhere else unless you are using their Project feature, but they only allow one free Project.
Yes, as long as the url is just the image and not a webpage containing an image. Keep in mind, that some websites block Codepen from displaying the image (sites like imgur)
Ok, I can’t seem to find an webpage that is just the image so I’ll have to do it another way. In reference to an earlier comment you made, “So I assume the file named index.html is in the HTML folder?”…What do I have which is named index.html? The only thing I have in the HTML folder is an “img” folder and one image in it.
I’m still confused about how to import an image from this folder to codepen. Eeek! Sorry to be taking up your time!
Can you provide the link to the page which has the image you want?
What is the name of the file containing the above html?
Codepen doesn’t host images on a free account. So you need to use another service:
I’d suggest using https://commons.wikimedia.org/wiki/Main_Page for the tribute page.
Say I want to use this image:
I would click on Use on Web and grab the file URL…then:
<img src= "https://upload.wikimedia.org/wikipedia/commons/2/25/Dewi_Sandra_at_Surabaya_Urban_Jazz_Crossover_2010_%281%29_crop.jpg" alt="Coltrane Explaining a Concept to Albert Ayler">
Make sure for all your projects you’re using images that are free to use or have been purchased for use.
Ok, I couldn’t find it exactly. But this is another example:
I want to take an image like this and put it on Codepen, so what I did was right clicked, selected “save as” and put it into the img folder.
And the html you referred to was just what I wrote on Codepen. At the moment I was trying to put in the picture which Tirjasdyn mentioned.:
I was not aware the free account would not allow posting of images for the one free project. Good to know. Thanks.
I tried to put that image on my project, but it still wouldn’t work:
You correctly saved the image to your img folder which is correct, but Codepen will not be able to reference that local file. Also, the Codepen link you posted does not contain anything except the original FCC information. Make sure to save the pen.
Ok, here is the saved pen with the image which Tirjasdyn suggested and I’m still having problems. What am I missing?
I don’t see any code in your codepen project.
Also, and this is something you need to get in the habit it now: don’t link to images on sites or copy them to your site unless the site states the image is free for your use.
Follow the directions I posted above, but do a search for Coltrane. They have a quite a few commons images you can use.