Question 318753 in Html Question posted in
Some basic documentation can be found here.

Having trouble displaying an image from Google Drive in HTML using JavaScript

I’m struggling to show an image from Google Drive on my HTML page using JavaScript. Following online guides hasn’t quite solved it for me.

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Google Drive Image</title>
</head>
<body>
  <img id="imageElement" alt="A lovely image">
  <script src="script.js"></script>
</body>
</html>

JavaScript (script.js):

const fileId = '1BEW9tkgVKlp_ebUc17LkXDH-mnPc4ome';
const imageElement = document.getElementById('imageElement');

async function fetchGoogleDriveImage(fileId) {
  try {
    const response = await fetch(`https://drive.google.com/uc?id=${fileId}`);
    const url = URL.createObjectURL(await response.blob());
    imageElement.src = url;
  } catch (error) {
    console.error('Error fetching the image:', error);
  }
}

fetchGoogleDriveImage(fileId);

Context:

  • Image in Google Drive is set to "Anyone with the link can view."
  • Despite that, the image doesn’t load in the browser, and the console shows an error.

Additional HTML (with pure html):

<body>
  <img src="https://drive.google.com/uc?id=1BEW9tkgVKlp_ebUc17LkXDH-mnPc4ome" alt="Your Image Alt Text">
</body>

CodePen Example

Any help is appreciated! Thanks.

Tags:

2

Answers


  1. 0

    You’re doing everything right here, it seems the issue is on Google’s end and started happening today (January 11, 2024 at time of writing). Google might fix this issue and allow direct image embedding, or they might continue to block it, meaning you’ll have to find an alternative way of hosting images for websites, such as S3.

    Login or Signup to reply.
  2. 0

    I have same problem. Temporary solution is to use drive file thumpnail with large width

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search