Troubleshooting image display from Google Drive in a web application

Other Questions Google drive
1

Help needed with rendering Google Drive images in my web app

I’m having trouble getting an image from Google Drive to display correctly in my web app. The placeholder shows in the right size, but the actual image does not load. Strangely, if I right-click the placeholder and open it in a new window, the image appears as expected.

Below is the snippet from my code.gs file:

function doGet() {
  let webPage = HtmlService.createTemplateFromFile('main')
  webPage.timeNow = getCurrentTime()
  webPage.subjectList = fetchSubjects()
  webPage.raceOptions = getRaceChoices()
  webPage.ageGroups = getAgeRanges()
  webPage.unionsList = getAvailableUnions()
  webPage.photoGallery = fetchPhotos()
  webPage.picture = fetchImage()
  return webPage.evaluate().addMetaTag('viewport', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no')
}

function fetchImage() {
  let imageSource = 'https://drive.google.com/drive/folders/1QAXgxG1svg30haRA1A0LuaJcnqr_x5-6'
  let imageData = UrlFetchApp.fetch(imageSource).getBlob()
  console.log(imageData)
  return imageData
}

And this is the relevant HTML file code:

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>
  <base target='_top'>
  <link rel='stylesheet' href='https://cdn.metroui.org.ua/current/metro.css'>
  <style>
    .narrow-container { max-width: 600px; margin: 0 auto; }
  </style>
</head>
<body>
  <div class='image-wrapper'>
    <img src='<?= picture ?>'>
  </div>
</html>

Can anyone suggest what I might be doing wrong or provide a solution?

2

I’ve encountered similar issues when working with Google Drive images in web apps. The problem likely stems from how you’re fetching the image URL. Instead of using UrlFetchApp.fetch(), you should use the Google Drive API to get a direct download link.

First, make sure you’ve enabled the Google Drive API in your Google Cloud Console. Then, modify your fetchImage() function to use DriveApp.getFileById() and file.getDownloadUrl(). Here’s an example:

function fetchImage() {
let fileId = ‘1QAXgxG1svg30haRA1A0LuaJcnqr_x5-6’;
let file = DriveApp.getFileById(fileId);
let imageUrl = file.getDownloadUrl();
return imageUrl;
}

In your HTML, use the URL directly:

Drive Image

Also, ensure your file permissions are set to public so it’s accessible. This approach should resolve your image loading issues and display the image correctly in your web app.

3

yo, i’ve dealt with this before. ur problem is with the image url. instead of UrlFetchApp.fetch(), use the drive api to get a direct download link.

try this:

function fetchImage() {
let fileId = ‘1QAXgxG1svg30haRA1A0LuaJcnqr_x5-6’;
let file = DriveApp.getFileById(fileId);
return file.getDownloadUrl();
}

also make sure ur file permissions r set to public. that shud fix it!

4

I had a similar issue when trying to display Google Drive images in my web app. The problem is likely with how you’re fetching the image URL. Instead of using UrlFetchApp.fetch(), try using the Google Drive API to get a direct download link.

Here’s what worked for me:

Enable the Google Drive API in your Google Cloud Console. Use DriveApp.getFileById() to get the file and then file.getDownloadUrl() to acquire a direct download link.

For example, your fetchImage() function could look like this:

function fetchImage() {
  let fileId = '1QAXgxG1svg30haRA1A0LuaJcnqr_x5-6';
  let file = DriveApp.getFileById(fileId);
  let imageUrl = file.getDownloadUrl();
  return imageUrl;
}

Then, in your HTML, simply use the URL directly:

<img src='<?= picture ?>' alt='Drive Image'>

This approach should resolve the image loading issues. Also, ensure that your file permissions are correctly set to public so that it’s accessible.