Blogger – Cannot Link to an Image from Google Drive

bloggergoogle-drivelinks

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?

Best Answer

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.

Related Topic