Using My Own Photos with CodPen

I’m wondering how I can use my own photo in a Codepen project. I’ve done this in the past by having a working project file on my computer and then referencing that in the html. The file had the project name and then inside I have an html and css main files, and an assets file, which houses the photos/graphics. However, I can’t seem to get this to work with Codepen.

1 Like

I think you can host assets with Codepen Pro.

At any rate, I uploaded all the images I needed with my Codepen projects to an account I made with Photobucket and just direct linked them. That works fine and that way I I know the original image shouldn’t disappear for any reason.

1 Like

Another option is to Sign-Up for Amazon’s AWS Services (first year free - called the Free-Tier Plan)

They have a cloud storage service called S3 which leIts you store several Gigs of data on SSD drives (or IDE drives if you prefer). If you have a static website (I think all the Front-End and Data Visualization projects are static ones), then you can even host your static website (including html, css, js, images, videos, etc. resources) on S3 - which seems to be a pretty awesome deal.

3 Likes

An alternative option, if you have a GitHub account already, is to upload the photo to a repository. You can then copy the “raw” link and paste it into your img tag.

5 Likes

I just upload them to imgur.com and use an href/img src link

3 Likes

Thanks for all the suggestions. I do have a GitHub account so I created a repository, so that I can just put all the images I use for this and upcoming assignments there. Thanks for the idea. It didn’t even occur to me.

1 Like

Glad I could help! Happy coding.

You shouldn’t do this because it’s against imgur’s terms of service to use imgur as a cdn. A great free alternative is https://postimg.org/, which is what I use.

1 Like

This looks like an interesting possibility. I’m using GitHub right now, but will look into this further. Thanks for the info.:slight_smile:

Lots of pictures now, lol. Thanks for the idea.

I use dropbox as an image repository which is then “shared” and i use the url in image tag.

1 Like

what i heard was
"if you renew your email every year you get a free subscription"

lol

Wow. postimg’s Terms of Use are pretty cut and dry.

1 Like

Meaning that if I sign-up with a different email (i.e. new account) or a separate renew process ?

I wonder if this is why most of the time I can’t see pictures people host on imgur in their projects.

Ditto to this one until I thought of using Github