Embed Google Drive images in Google Apps Scripts web app is not working

71 Views Asked by At
function showReviews(data) {
  var reviews = data.reviews
  var fileIds = data.starIds
  var container = document.getElementById('reviews-container');
  var reviewWidth = 100 / reviews.length + '%';

  reviews.forEach(function(review) {
    var reviewDiv = document.createElement('div');
    reviewDiv.className = 'review';
    reviewDiv.style.width = reviewWidth;
    reviewDiv.style.overflow = 'hidden';
    reviewDiv.style.height = '300px';

    // Get the corresponding star image URL
    var starImageId = fileIds[review.rating - 1];
    var starImageUrl = "https://drive.google.com/uc?export=view&id=" + starImageId;
    console.log (starImageUrl)
    reviewDiv.innerHTML = '<table style="width: 100%;"><tr><td><h3>' + review.author_name + '</h3>' + '<td style="text-align: left;">' + review.relative_time_description + '</td></tr>' +

                         '<tr>' +
  '<td style="text-align: left;"><img src="' + starImageUrl + '" alt="Rating: ' + review.rating + ' stars" style="height: 20px;" /></td>' +
  '<td style="text-align: left;">Rating: ' + review.rating + ' / 5</td>' +
  '</tr></table>'

 +                          '<p>' + review.text + '</p>' +
                          '<span class="read-more" onclick="toggleReview(this)">Read more</span>';
    container.appendChild(reviewDiv);
  });
}


This it the main function. Basically this is a web app that displays my google reviews. I have made the 1-5 stars rating images and stored them my google drive. the sharing options are set to anyone with the link. It was working perfectly for a while. But recently, I noticed all of my web apps that uses images stored in my Google Drive are not working. I used to be able to use "https://drive.google.com/uc?export=view&id=" + id to embed the image in the HTML. But now the image shows a broken linkhow it is a broken link in the browser. But when I right clicked on the image and use "open image in a new tab" the image will display properly. screenshot of the image in the new window

i have console logged the URL of the image filehttps://drive.google.com/uc?export=view&id=1rTS4e5nJJtdUoV6GEJhIN0ZI7d98-nbg and it seems to be perfectly working fine.

I tried using different URL's to get this working and still not working. I tried logging the URL and the link seems to be ok. The method of embeding images is working well when I send emails with image using that URL

"https://drive.google.com/uc?export=view&id=" +id

but still doesn't work within the GAS web app environment. I wanna know how to fix this. I tried every way possible and still can't get it to work.

0

There are 0 best solutions below