Cannot link to an image from Blogger to Google Drive

Question

I have a simple PNG image on my Google Drive. How can I create a link from a Blogger blog to that image?

Here is what I tried:

1. In Google Drive, I changed the settings of my PNG file to "Anyone on the internet can find and view".

2. In Google Drive, I copied the URL of by PNG file https://drive.google.com/file/d/0B-NH9wCC0oM4U2x2WTZ3ZkJ1a1k/view?usp=sharing).

3. In my blog's HTML, I added a link to the URL copied in step 2, like this:

   <img alt="https://drive.google.com/file/d/0B-NH9wCC0oM4U2x2WTZ3ZkJ1a1k/view?usp=sharing" src="https://drive.google.com/file/d/0B-NH9wCC0oM4U2x2WTZ3ZkJ1a1k/view?usp=sharing" />

4. When I open the blog, the link does not show up as a PNG image, but as a link ("https://drive.google.com/file/d/0B-NH9wCC0oM4U2x2WTZ3ZkJ1a1k/view?usp=sharing").

I tried with Chrome and Firefox, but same result.

What am I doing wrong?

Answer 1

That is the link to the Google Drive image viewer, rather than a link to the image itself. If you check the URL for the image when you visit that link, you get an URL like:

blob:https%3A//drive.google.com/32efcf38-d7e6-4656-9046-eede4c4880f9

That's not useful. You need to do a little URL manipulation of your original URL to be able to hotlink it. You need to take your original URL, which looks like this:

https://drive.google.com/file/d/{file-id}/view?usp=sharing

And change it to this:

https://drive.google.com/uc?export=view&id={file-id}

So, in your specific case:

https://drive.google.com/uc?export=view&id=0B-NH9wCC0oM4U2x2WTZ3ZkJ1a1k

And now you should be able to see your image:

Of course, the "sharing" setting for the image must be set to "public on the web". (Which you've already done.)

This URL manipulation is completely undocumented in the Google Support documentation. As such, you are duly warned that this method may stop working. You might want to find a more stable image storage solution. Imgur is purpose-built for this sort of thing, but there are plenty of other alternatives.

Credit where credit is due: I found this solution on the Google Operating System blog, which in turn found it at this question on Stack Overflow: Displaying files (e.g. images) stored in Google Drive on a website.

Answer 2

Short answer

While it's possible to use files stored in Google Drive as website resources at this time it's not officially supported and should not be used for websites that have a lifespan beyond August 31, 2016.

Explanation

The instructions to publish Google Drive files as website content are in Publish Website Content - Google Drive REST API but according to Deprecating web hosting support in Google Drive - Google Apps Developer Blog

Beginning August 31st, 2015, web hosting in Google Drive for users and developers will be deprecated. You can continue to use this feature for a period of one year until August 31st, 2016, when we will discontinue serving content via googledrive.com/host/[doc id].