How do I "host" a photo to use on the Personal Website project?

Code Feedback
1

Do I just upload an image to a site like postimage.org or am I being simple? And is “host” the correct term?

2 Likes
2

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

8 Likes
3

The public folder of any cloud service should work (Dropbox, OneDrive, iCloud, etc).

4 Likes
4

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.

5

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!

11 Likes
6

Thank you for clearing this up for me. :sunglasses:

7

Don’t forget, you can even use dropbox to host other files too, like css or js files :sunglasses:

2 Likes
8

I’ve used photobucket for my projects. Works as advertised. It has the direct link right beside the photo, ready to be copied.

1 Like
9

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

2 Likes
10

Hey, thanks for that link to the yahoo help page. I tried doing it with flikr before I tried photobucket. Now I know how!

1 Like
11

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. :slight_smile:

12

Like nuhash9, I use PhotoBucket and it works great.

1 Like
13

if you are looking for something to host images only check this one http://imgur.com/

1 Like
14

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
4 Likes
15

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.

5 Likes
16

Thanks for sharing this! Worked perfectly!

18

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:

I’ve spent an excessive amount of time on this seemingly simple issue - significantly more than I spent on learning Javascript, Bootstrap and JQuery combined. I’ve found mountains of instructions that became obsolete within the last year. Even this chain discusses Dropbox public folders (which don’t exist anymore) and imgur (which blocks codepen) plus a few other recently-turned-unusable options. This is the only place I’ve found Cloudinary mentioned.

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.

19

Cloudinary looks good!

20

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.

21

Thank you so much!! That’s Wonderful