Hello Everyone
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 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 ![description]()
Sorry, I would put the URL in a img tag? Like I would just have the src point to the URL?
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!
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 tried to put that image on my project, but it still wouldn’t work:
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.
Go here
https://commons.wikimedia.org/wiki/Main_Page
Follow the directions I posted above, but do a search for Coltrane. They have a quite a few commons images you can use.
ah okay, you grabbed the page URL you need to click on Use this file on the web and get hte file url
Got it! Thank you both so much. I’ll do the same process with a Coltrane picture. Both of you have tremendous patience. Thank you again.
Well, i just google images themselves. Example: type in google search “beach volley ball”, then click on images tab, find suitable image. Click on image. When image is enlarged on top right corner of browser, right click on it, choose “Copy image address” and paste that in img src’s. You can apply this in codepen and your local html file.