Html Question posted in
Some basic documentation can be found here.

Html – 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>
Tags:

2

Answers


  1. 0

    I assume you have already achieved to publish your script as web app so I will not write how to.

    for the correction of your date problem is simple but playing with date is not really simple sometimes. it needs to be formatted to serve your needs.

    so, lets write the code first, then the explanation..

    window.onload = function() {
  const today = new Date();
  const year = today.getFullYear();
  const month = String(today.getMonth() + 1).padStart(2, '0'); 
  const day = String(today.getDate()).padStart(2, '0'); 
  const formattedDate =`${year}/${month}/${day}`;
  document.getElementById('date').innerHTML = formattedDate
};

    we get the date, then separate the year, month and day out of the day object.
    padStart function adds the leading zero to our dates.
    then we gather all as a string…

    now you can safely write it to html

    one more thing as you may realize, I have put all the code inside onload function to ensure that they will be working after DOM is fully loaded, otherwise there may be a problem to assign values of our results.

    and for the image, I don’t understand what kind of image you are trying to load from this url but, if you test it with a proper image, you will see its loading. so no problem on that, apart from the url may be…

    you may try something like,

    <img src="https://picsum.photos/id/237/200/300" alt="A nice puppy">

    hope it helps.

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search