How to put images into codepen?

#1

I have an image of my tribute page that I want to add to my portfolio, however it is off my own computer and I’m working within the codepen environment. How can I link a local file or will I have to upload it then do it. I’ve uploaded it to google drive but I don’t know how I can add the image to my website.

This is my portfolio - http://codepen.io/tobymeyrick/pen/RojmGN?editors=1100

2 Likes
How to save screenshots in codepen?
#2

Google “image url” - you’ll have to host it on the web and use that url in Codepen.
And if you can, start learning Github…not that I’m good at it.

#3

Keep in mind you cannot use imgur:

#4

The ability to host an image directly from Google Drive has been discontinued by Google. Luckily, we found an easy workaround, so you can link directly to the image without linking to your Drive.

Please watch this video.

3 Likes
#5

Thanks I’m using https://postimg.org and it seems to work perfectly

2 Likes
#6

What really works for me is to use an online image-uploading site like PostImage will let you upload images for free (as long as the files are less than 5MB, I think). If you want up to 50MB, you can try using Mkerala, but be warned, if you use Mkerala, you images will be deleted after 120 days of inactivity.
By the way, remember to use the ‘Direct Link’ for any of these sites.

#7

postimage.org is a great resource! Thanks for sharing. This helped me out greatly.

#8

Hi,
what i do, i use PHOTOS.GOOGLECOM from there copy image URL add it yo your codepen, or you can add your image to YOUR blogger and take URL from there.

#9

Thanks Bazita, this worked just fine!

#10

very useful tool. thank you so much…

#11

Read through all these suggestions.

It’s Nov 7, 2017, and right now I can’t get any image links working with either Imgur, Google Photos, or Dropbox. It really seems like Codepen has turned off this feature on the free account. I’m very tight on money right now. Is there a solution to this, or will I have to start using another service other than Codepen? I was able to use an image for my tribute page off a search, but that is all that is working.

#12

cloudinary.com. Free and working on Codepen.

#13

I just figured out the problem. I was trying to use the wrong code. I was using tags instead of image tags. I figured it out by copying my working link from the tribute page.

Sorry about my confusion.

#14

How? This doesn’t work for me.

#15

You can convert image to base64, this technique does not require you to be PRO in codepen and the image will never stop being available.
Instead of put the image url put the base64 code given by the converter.

I hope it has been helpful for you.

you can use any website like:
https://www.base64-image.de/

#16

There is a good alternative to base64-image witch is https:// tobase64.dev that has no limit of image conversion and does not upload content to their servers.

#17

Hi,

Working on Chromium Edge Beta and free code pen environment and had to solve same issue. This alternative and may help other users.

You can use Flickr in free code pen environment. Flickr provides a free upload area and 1Tb of space, and you can copy a link directly from your photo in their Camera Role feature.

Google worked initially but then seemed to get blocked after a few days. So far Flickr is a reasonable alternative.

Andrew

#18