How do I display images from Google Drive on a website?

Use the 'Get Link' option in Google Drive to get the URL.

Use <img> tag in HTML and paste the link in there.

Change Open? in the URL to uc?.


Example of Embedding a Google Drive Image

Original URL: https://drive.google.com/file/d/0B6wwyazyzml-OGQ3VUo0Z2thdmc/view

You need to copy the ID from the original URL (the characters between the /d/ and /view), and use it in this URL:

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

The image below is embedded using this method:

Photo by Paula Borowska

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Drive</title>
</head>
<body>
    <img src="https://drive.google.com/uc?export=view&id=0B6wwyazyzml-OGQ3VUo0Z2thdmc">
    <br>
    <a href="https://drive.google.com/uc?export=download&id=0B6wwyazyzml-OGQ3VUo0Z2thdmc" download>
        Download
    </a>
</body>
</html>

Thank You https://codepen.io/jackplug/pen/OPmMJB

Tags:

Google Drive Api

Recent Posts