htmlgoogle-apps-scriptweb-applications

Image not displayed in google web application and also only date not displayed. It displayed with GMT and standard time zone

Sample header image. I am trying make a header same as attached image. First logo image on the left side of the header and side to it a date and time displayed. I have written below code in google app script and publish as a web application. But image is not loading and also date is displayed with time zone.

const today = Date();
    document.getElementById('date').innerHTML=today;
 
.heading {
  font-size: 30px;
  font-weight: bold;
  background-color:#9a9999;
  text-align: center;
  width: 100%;
  height: 100px;
  float: left;
 }

 .date {
  float: left;
 }
 img {
  height: 40px; 
  width: 40px;
  float: left;
  position: center;
 }
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <base target="_top">
    

  </head>
  <body>
    <div class="heading">
      <img src="https://drive.google.com/uc?export=download&id=1JP06az8YEfm0CMnPgkahaponh71iTk_X">
        <div class="date" id="date"></div>
          <div>Sample header</div>
    </div>

  

  </body>
</html>

Solution

  • Use thumbnail instead of export

    This URL = https://drive.google.com/thumbnail?id=FILE_ID&sz=400 is a thumbnail-sized image for a specific Google Drive file, where FILE_ID is the unique ID of the file in Google Drive. and for this URL = https://drive.google.com/us?export=view&id=FILE_ID provides a direct link to view the file in Google Drive, where FILE_ID is again the unique file ID.

    Note: To ensure the thumbnail or direct link works for everyone, make sure the file's sharing settings are set to "Anyone with the link can view."

    Script used

    Code.gs

    function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index')
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .setTitle('Web App Header');
}

function getCurrentDateTime() {
  const now = new Date();
  return {
    date: now.toDateString(),
    time: now.toLocaleTimeString()
  };
}

function getLogoUrl() {
  const url = "https://drive.google.com/thumbnail?id=(FILE_ID)";
  return url;
}

    Index.html

    <!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 20px;
      background-color: #f4f4f4;
      border-bottom: 1px solid #ccc;
    }
    .logo {
      height: 40px;
    }
    .logos {
      height: 40px;
    }
    .date-time {
      display: flex;
      align-items: center;
      gap: 20px;
    }
  </style>
</head>
<body>
  <div class="header">
    <img src="https://drive.google.com/thumbnail?id=(FILE_ID)&sz=400" id="logo" class="logo">
   

    <div class="date-time">
      <div id="date">Loading date...</div>
      <div id="time">Loading time...</div>
    </div>
  </div>

  <script>
    google.script.run.withSuccessHandler(function(data) {
      document.getElementById('date').textContent = data.date;
      document.getElementById('time').textContent = data.time;
    }).getCurrentDateTime();
    
    google.script.run.withSuccessHandler(function(url) {
      console.log("Logo URL:", url);
      if (url) {
        document.getElementById('logo').src = url;
      } else {
        console.error("Logo URL is undefined");
      }
    }).getLogoUrl();


    setInterval(() => {
      google.script.run.withSuccessHandler(function(data) {
        document.getElementById('time').textContent = data.time;
      }).getCurrentDateTime();
    }, 1000);
  </script>
</body>
</html>

    Note: Adjust the CSS base on your design.

    Sample Output

    Sample Output