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?
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.
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.
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.
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?
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.
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.)