How to put images into codepen?

How to put images into codepen?
0

#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


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.


#5

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


#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.