How to add an image on codepen?

This is my first time using this forum, so I’m not sure if this is the right place for this topic, so please let me know if I should put this post elsewhere.

I’ve just started the first project in the responsive web design class, and I’m having trouble adding a picture to the tribute page. I did google around and found several threads about this, but I didn’t find an answer to fix my problem.

I did try linking directly where I found the image, then I tried using imgur, and finally google drive.

Here is the code that I have so far:

Imgur is funky when it comes to using images on your website. The URL is just not directing to the image properly. A good way to test if your image URL is in the proper format is to open the URL in a separate tab. If there is anything on the page other than the actual image, then it is not the correct URL.

Try this value for your src attribute "//i.imgur.com/Y8Pl3l7l.jpg". I found this by clicking on the three dots in Imgur and clicking on “Embed”. Then I pasted the embed code (which is a blockquote for some reason). The image displayed, so I looked in the Chrome dev tools to see what src value the image was displaying with. Then I pasted that in for the src using an img tag. Seems like it should be easier, but anyway, I hope that helps.
Screen Shot 2022-01-23 at 1.50.46 PM

2 Likes

@jarronshaun, you do not want to use imgur to host images. If you read their terms of service you’ll see that they don’t allow it.
You can search and find quite a few places that will host your image for free.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.