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%20Submissions')
.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.