Host Images on Google Drive

Posted by Jono on August 30, 2015 in Tips & Tricks

A step-by-step guide showing how to host images on Google Drive when Dropbox goes down.

A lot of us use Dropbox Public folders for image hosting when developing and testing websites and apps locally. But what do you do when Dropbox goes down? You host your images on Google Drive, here’s how to do it.

Make Your Google Drive Folder Publicly Accessible

To make images hosted on Google Drive accessible for online use or development, we need to create a new folder in Google Drive that is accessible to the public, here’s how:

Create a new folder named “images,” and either drag and drop your image assets into the folder or upload them:
host-images-on-google-drive-01

Now, right-click on the ‘images’ folder and choose “Share…”:
host-images-on-google-drive-02

Next, click “Advanced” in the bottom right corner of the Share dialog:
host-images-on-google-drive-03

Now, you are in the “Share Settings” dialog. The first row below the “Who has access” sub heading will say something like, “Anyone at [Your Name Here] who has the link can view.” Click the “Change” link:
host-images-on-google-drive-04

That brings up the “Link Sharing” dialog. Choose the first option, “On – Public on the web” and press Save:
host-images-on-google-drive-05

Obtaining the Image Source in Google Drive

Now that your folder is created, populated with images and shared publicly, we can use the Google Drive image sources for our projects. Here’s how to get each image’s source:

Begin by going to the image that you want to embed in your project’s HTML and double-click on it. That will open the image’s preview in an overlay:
host-images-on-google-drive-06

Next, click on the “Pop out” icon in the top-right corner of the image’s overlay interface:
host-images-on-google-drive-07

Now, right-click on the image and choose “Copy image URL” from the contextual menu that appears. Paste that URL into your project’s image source and you are all done:
host-images-on-google-drive-08

One Comment

What do you think?