I am working on the challenge “Build a Tribute Page”. I have chosen my subject and can find multiple images on the internet, but I don’t know how to save them somewhere that codepen can access without upgrading to the pro version. Is there a way? Dropbox? Drop? Google Drive?
Thank you.
I had the same dilemma a few weeks ago! I ended up using http://imgur.com/ and it’s working for me (for now)
If you right-click on the image and select Inspect Element (or Inspect), you should be directed to your browser’s dev tools, where you can see the URL of the image and copy that into your Codepen source code.
imgur.com quite specifically does not work with codepen, because they block the codepen referer. You may still see the images in your browser if you’ve pulled up the imgur urls directly previously, due to them being cached. Everyone else will simply get a broken image (and you eventually will too).
I personally use google drive, some others here use dropbox. Just google for “direct link generator” plus the name of your preferred storage service. I’ve also heard good things about cloudinary.com, which is actually designed for this sort of thing.
If they’re on the internet, I’d use the URL of the actual picture, but other people may prefer otherwise.
For pictures that aren’t already on the internet or I need to download for whatever reason, I use Dropbox. Only caveat would be that you have to remove the ?dl=0 and add ?=raw1 to the end of the URL, but I think that’s a minor inconvenience.
I’ve also started transferring things from CodePen to GitHub, and GitHub allows you to upload pictures to its servers, so that’s super nice.
Thank you for the heads up about imgur! I’ll switch
I had this problem and settled on github. I think only because I already have an account there.
Remember if you use it for pictures to use raw.github.com/path/to/file otherwise you are not linking to the actual picture just a view of the picture and it won’t show up
Unless the website specifically allows it, I would not recommend taking the URL of the image and linking directly to it. Also make sure that the picture is either in the public domain or free to use before you use it.
As for storage, I started with http://cloudinary.com/ and switched to github once I learned how to use it. They work well with codepen, so I can recommend both.
I used a slightly odd trick: I have an old Wordpress.com account and when you upload images to the asset library there, you can use the url you get. The image doesn’t actually have to be live on your blog anywhere, just in the library. You don’t have to worry about the file going anywhere then, since you still control it.
If you’ve got a Dropbox account already, then the above suggestions are good, but if you don’t, but do have Wordpress, this is a pretty easy workaround too.
I feel github is the easiest way, because the assets are in the repo anyway. A little trick I came across a couple of days ago is to not use the https://raw.github.com/user_name/filepath/, but instead you can just use https://cdn.rawgit.com/user_name/filepath/. This has the advantage, that all files are served properly. The raw.github URL doesn’t work for SVGs for example, because they are served as plain text.
Happy coding 
Dropbox is probably the easiest I’ve used, but I have found cloudinary to be the fastest.
If you use dropbox, remember to use the direct file link. Ex. https://dl.dropox… etc. not https://www.dropbox. You can use this method to host entire front-end websites, images, etc.
thanks a lot
u solve my problem
Hello, I know this is quite an old topic, but I have a question regarding uploading images from dropbox. I have just been copying the link that appears when you click on the image in dropbox, and I can’t get it to work. I dried the dl.dropbox, and that isn’t working either. Do I need //dl.dropbox.com, what am I missing?
I am not sure that dropbox works anymore for hosting images, and haven’t used it in a long time, so I can’t really help you there. Have you tried using www.cloudinary.com?
Hmm, ok. I’ve heard about it, but haven’t tried it yet. I’ll look into it and do some more research. Thank you!
Ah, used the direct file link you suggested and boom, it showed up!
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.
[EDIT]: Remember to use the ‘Direct Link’ for any of these sites.
I’ve tried nearly all above options and found that PostImage is the easiest one. After all, it explicitly gives direct link for each image. I used links from it in both my html and css codes without any problem.
Others may need some trick. Google Drive may be a possible one, but I must use another site to generate the direct link, and I’ve failed using it in css code.
I’ve tried this and it’s not appearing still.
What (specifically, in as much detail as you can offer) have you tried? Are you seeing it load fine in dev tools? Are you seeing any errors in the console? Can you view the image with just the link in your URL bar?
(We’ll need more information to help you debug. And, just for the future, it’s typically much more helpful when you’re asking questions to say I’ve tried x, y, and z. When I tried x, I got this error message. When I tried y, this appeared fine but it was in a weird place. I would have expected it to be in this other place instead. Or something to that effect - help us understand what you’ve done and the results that you’ve gotten.)