How can I fetch a public image from google drive using the File ID (not using node)-CodePudding

I'm trying to embed an image that's stored in my Google Drive onto my website. Here's the kicker: the File ID in question is not static, as my function always grabs the latest image in a list of form submissions.

I've fetched the preview URL from a Google Sheet of form responses using Apps Script. I've also sliced out the File ID using .replace() on the first part of the URL.

How can I grab the Image (which is public) from my google drive using this file ID and embed it?

Here's my code (omitting irrelevant info ofc):

const deskFeaturePhoto = document.querySelector('#featurePhoto')

fetch('https://script.google.com/macros/s/AKfycbwWFiL5Lg4J_JeTYAW_xyyH82ZStJYpKiJsBpBiJKT6XrjIYaDmpVOxCa-Jwt4iysNJoQ/exec?t=All Submissions')
  .then(res => res.json())
  .then((marketingQuery) => {
    deskFeaturePhoto.innerHTML = `<img src="https://drive.google.com/uc?export=view&id=${marketingQuery[marketingQuery.length-1].feature_image.replace('https://drive.google.com/open?id=', '')}" alt="Special Photo" style="width: 50%;">`
  }).catch(err => console.error(err))

<div id="featurePhoto" style="display: flex; flex-direction: column; align-items: center; justify-content: center;"></div>

This current 'solution' returns a 403 error despite displaying the image correctly when opening the image alone using the final URL.

CodePudding user response：

Issue was reproduced on my end with no errors using sample code provided. This is most likely related to local Live Server issues, as requested sample code is here