Google Drive images in img src=webContentLink?

Question

Can I use images stored in Google Drive to be used in a website by the html,<img src="<webContentLink>" /> ?

Where <webContentLink> is returned after a file is uploaded and is in the format, 'https://drive.google.com/uc?id=<FILEID>&export=download'

I have a small website created for account users only. They can upload files to their google drive folder and this folder has permissions set to share with the accounts of the other users (specific people only). This is an ASP.NET MVC 5 website using the Google API Client Libraries for .NET.

In Chrome and Firefox the images display fine, in IE and Safari they don't show and return a 302 status code. Sometimes if you view the image directly in a new tab and then refresh the web page it shows. It might also show if the folder permission is set to 'anyone with the link', but this isn't ideal.

The documentation (https://developers.google.com/drive/v3/web/manage-downloads) says, 'If you want to allow a user to view a file directly in a web browser instead of through the API, use the webContentLink.' I understood this to be okay to use img src='' to display an image directly without the API, however it then goes on to say, 'You can either redirect a user to this URL, or offer it as a clickable link'.

So can Google please confirm if 'webContentLink' can be used in img src='', or not and why it works in some browsers and not others? I've read many posts on this, some old, some more recent. If it's not to be used in img src I think it should be made clear in the documentation.

Many thanks

Solution 1

Yes, you can definitely use webContentLink as your img src in your HTML page. I tried and this is what I got on my sample HTML page.

  <img src = "https://drive.google.com/uc?id=0Bzgk4zncCwI7aDZCSHY4YU0zNUF&export=download">

webContentLink can be obtained using Files.list and place 'files' in the fields parameter.

Solution 2

Displaying an image from Google Drive can be done in 3 steps:

Retrieving your image ID

Right click on your image and select Share. You'll see a link that you need to copy. You will extract the image's ID from the URL.

Here is what your sharing link should look like:

https://drive.google.com/open?id=YourFileId

Check your sharing settings

Your images will only be visible to people who have access to those files. To allow anyone access to your images, you need to set the sharing setting as Visible with the link.

Display your image

With your sharing settings properly configured and your image file IDs at hand, you can now specify how your images will be displayed using a prescribed format.

https://drive.google.com/thumbnail?id=YourFileID

More details can be found here