How to add pictures from photos folder to code pen

hi guys im working on portfolio project, i can add images from the web , but i want to add pic of myself that is in my photos file in my computers ,anybody knows how to do it , it might me simple but i can’t figure it out now , please help me out to keep working on my project
thanks a lot in advance

happy coding



If you want to upload images to codepen you’ll have to upgrade to pro.

Codepen does not let you host your own images for free, so you have to upload them somewhere else and link to them. Many use Dropbox.

See this thread for more discussion:


upload it to google (photo or drive). click the photo than view image to other tab or copy image link location (right click mouse). copy the url to src img. it work but seems not right. may others have better solution than me. :slight_smile:


if you don’t want to upgrade to codepen pro( you shouldn’t, i would argue you should be using a local environment so you get experience working with a real life setup) you can put your assets, in this case, photos, in any cloud solution (dropbox, github, etc). The img scr attribute will be whatever the url of that photo is (right click + copy image address);


ok thanks everyone for your useful comments and help ,using google photos might work
happy face here :smile:

1 Like

What I always use is a site like PostImage that never deletes your old images. If you want a site that lets you upload bigger images (up to 50MB), something like Mkerala might work, but Mkerala deletes images that have not been accessed in 1 month, so be careful if you use that one.
[EDIT]: Mkerala now deletes images after 120 days.

Hope this helps!


thanks there are several links once you upload the image which one should i use ? i appreciate your help

Use the “direct link”. This is the direct link to the raw image file that you want.

it worked out , thanks a lot … : :wink:

1 Like

How come its not working for me :frowning:

Other people have already mentioned image hosting sites so my advice is applicable if you use GitHub (which you should as a web developer). If you have your project on GitHub as well as codepen you can just find the picture file on GitHub. Once you’ve found it, right-click and select “copy image address.” The copied address is what you put within the image href attribute.


I tried it man but the link expires after some days @XRinduDendam

Can you explain how this can be done using github thanks.

how do you put your project on github


PostImage works perfectliy with codepen, thx a lot

1 Like

Hi there!
If you want to upload images to codepen you’ll have to upgrade to pro.
or you can read more here:

Hello Coders, I have a solution for uploading images to your codepen projects be it the Tribute or the Portfolio. You need to create a CLOUDINARY account that will help you manage your images and videos of any size…I am using it and its working perfect for me, the link sign up and enjoy having images of your choice in your project.


I tried ot over and over and still cant make it/
My Google Drive’s links dont work in codepen

Can you give us a link to your codepen with the google drive images?