Do I just upload an image to a site like postimage.org or am I being simple? And is “host” the correct term?
What you’re wanting to do is ‘link’ to an ‘uploaded’ image. The image is ‘hosted’ by a company on their server.
There are many free image hosting sites. You need one that allows direct linking to images. I don’t use postimage so I don’t know if that’s possible.
I’ve used Cloudinary myself for all my projects so far to host images and even sounds
How can I know in which folder the file should be in order to add it in codepen?
The public folder of any cloud service should work (Dropbox, OneDrive, iCloud, etc).
If you pay for a CDN service, use it (watch some tutorials online).
If you pay for a cloud storage service (dropbox for example), you can hotlink the absolute IMG url.
If you don’t, try with free image hosting services or using your own hosting provider’s public folder.
use dropbox buddy, it works charm!! just upload a pic in public folder, copy its public sharing link, and then add “?raw=1” to the end of the sharing link… or it won’t work. just use this new link as imh src=“link+?raw=1” and its done!
Thank you for clearing this up for me.
Don’t forget, you can even use dropbox to host other files too, like css or js files
I’ve used photobucket for my projects. Works as advertised. It has the direct link right beside the photo, ready to be copied.
You can also use photo sites like Flickr. I used flicker for my projects. It is easy, works and it’s free.
You can visit this link to learn how to do it. https://help.yahoo.com/kb/SLN15714.html
Hey, thanks for that link to the yahoo help page. I tried doing it with flikr before I tried photobucket. Now I know how!
I have used postimage for most of my projects. Haven’t had a problem yet
Whichever service you use, just always remember to get the direct link of the image.
Like nuhash9, I use PhotoBucket and it works great.
you can use Github to host your static images.
- Go to your repo and open any issue
- Drag and drop the image in the comments box
- After the image is uploaded, you will find a link in the box. Voila! Use that link in your app
Imgur actually won’t let you host images and link to them from codepen. I think the reason why is in their TOS, but they’ve blocked links to my images. I definitely recommend Cloudinary though – it’s free, you get 5gb of bandwidth a month, and you can track usage.
Thanks for sharing this! Worked perfectly!
I’m trying Cloudinary, and so far it looks like it is working. YAY! Thank you obentou!
It looks like Cloudinary has a business model that works for these projects (free at the ridiculously small amounts of bandwidth we need, cost kicks in at the levels a “real website” would encounter).
To Any FreeCodeCamp leaders that might read this:
Since there has been a recent cascade of common free image hosting services blocking hotlinking completely even at the lowest levels, it would be helpful if this issue were addressed in early directions for codepen projects (similar to the hint about weather API’s in the weather app project).
I understand the value of encouraging students to seek most information organically at those levels, but in this particular area there is so much mis-information out there (often stated in ways that make it sound like the seeker is stupid for not doing an impossible thing) that (in the humble opinion of this student) it’s likely to result in a fatal level of frustration for many students at this level.
Cloudinary looks good!
https://imgcave.com is a great place for budding photographers.You can join for free. There’s no requirement to register as users can anonymously upload photos. It allows various image formats, hotlinking and generates numerous codes to easily link to images.
Thank you so much!! That’s Wonderful