4

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?

4

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

Google Drive share menu

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.

  • Yes, I see - this problem has actually nothing to do with Blogger, it's a Google Drive problem. Are you saying there is no way to get a URL to that image stored in my Google Drive, which I could use in an HTML page?! That would seem absurd to me. – user113281 Jan 24 '16 at 14:47
  • I found a way to do it and have updated my answer. – ale Jan 24 '16 at 15:07
  • sheet formula for converting image URL to the right format ="https://drive.google.com/uc?export=download&id="&REGEXEXTRACT(B1,"(?:(?:file/d/)|(?:open\?id=))(\w+)") – daniel Jan 25 '16 at 19:01
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].

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.