Question

我为我的组织开发了两个Web应用程序，一个可搜索的人员目录和联系表。两者都按预期工作，我对它们感到满意，但是我无法添加我们的品牌形象。这是本地存储在我的C：驱动器上，我似乎无法像在Atom或Brackets这样的文本编辑器中那样指向Google应用程序脚本中的本地路由目录。我已经在下面添加了代码index.html文件，假设这就是您所需要的，如果您需要code.gs，我也可以添加它。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <style>
    /* Base Styles -------------------- */

      h2 {
        padding-top: 20px;
      }

      /* Main Styles --------------------- */

      .main-header {
        padding-top: 20px;
        padding-bottom: 20px;
        background: linear-gradient(180deg, #141760, #007DAD, transparent 90%);
        background-size: cover;
        border-radius: 25px;
      }
    </style>
  </head>
  <body>
    <div class="primary-content container form-group">
      <header class="main-header d-block bg-primary text-white text-center">
        <p class="title">Promoting </p>
        <h1>AUE</h1>
      </header>
      <div id="container" class="primary-content form-group">
        <h2>Contact us</h2><br>
        <form id="responderForm">
           <input type="text" name="firstName" class="input-field form-control" placeholder="First Name:" required><br>
           <input type="text" name="lastName" class="input-field form-control" placeholder="Last Name:" required><br>
           <input type="email" name="email" class="input-field form-control" placeholder="Email:" required><br>
          <select id="service" class="input-field form-control">
            <optgroup class="input-field form-control" label="Request information about our services">
              <option value="Volunteering" name="service">Volunteering</option>
              <option value="Home Help Service" name="service">Home Help Service</option>
              <option value="Befriending Service" name="service">Befriending Service</option>
              <option value="Information & Advice" name="service">Information &amp; Advice</option>
              <option value="Advocacy" name="service">Advocacy</option>
              <option value="Fundraising" name="service">Fundraising</option>
              <option value="Marketing" name="service">Marketing</option>
              <option value="Chief Executive Office" name="service">Chief Executive Office</option>
              <option value="Invoice Query" name="service">Invoice Query</option>
            </optgroup>
            <optgroup class="input-field form-control" label="Get in touch with Human Resources">
              <option value="Reference requests" name="references">Reference Requests</option>
              <option value="Employment Opportunities" name="references">Employment Opportunities</option>
            </optgroup>
            <optgroup class="input-field form-control" label="Contact us about GDPR">
              <option value="Consent" name="gdprRights">Withdraw Consent</option>
              <option value="Right Of Erasure" name="gdprRights">Right to Erasure</option>
              <option value="Data Subject Access Request" name="gdprRights">Data Subject Access Request</option>
            </optgroup>
          </select><br><br>
          <label id="enquiry_label" class="text-label">Please enter your message below:</label><br>
            <textarea id="enquiry_form" class="text-input form-control" rows="10" cols="50"></textarea><br><br>
            <input type="submit" name="submit" value="SUBMIT" class="event input-field btn btn-outline btn-primary"><br>
        </form>
      </div>
      <footer class="main-footer text-center">
        <p>Helping people.</p>
        <p>&copy; All rights reserved to </p>
      </footer>
      <script>
        const myForm = document.querySelector('#responderForm');
        console.log(myForm);
        myForm.addEventListener('submit', function(e){
        e.preventDefault();
        let myData = {
        'first' : this.querySelector('input[name="firstName"]').value,
        'last' : this.querySelector('input[name="lastName"]').value,
        'email' : this.querySelector('input[name="email"]').value,
        'service' : this.querySelector('select[id="service"]').value,
        'enquiry': this.querySelector('textarea[id="enquiry_form"]').value
        }

        google.script.run.withSuccessHandler(onSuccess).addData(myData);
        console.dir(myData);
        })

        function onSuccess(data){
          console.log(data);
        }
     </script>
   </div>
  </body>
</html>

我假设我可以添加存储在本地目录中的图像，但是希望获得有关如何完成此操作的指南？

谢谢。

下面的更新代码：

<body>
    <div class="primary-content container form-group">
      <header class="main-header d-block bg-primary text-white text-center">
        <img src="https://drive.google.com/open?id=1caqBFth6-DyKwrHTG3-F-lGak" style="height: 200px; width: 200px;">
        <p class="title">Helping people</p>
        <h1>AUE</h1>
      </header>

Answer 1

您可以将文件上传到Google云端硬盘，然后从那里提供服务。为了使图像正确显示，您需要做两件事。

将图像设置为“知道链接的任何人都可以查看”
将下载URL添加到img src=""

要创建直接下载URL，您需要将文件ID附加到以下链接；

https://drive.google.com/uc?export=download&id=

所以你应该有类似的东西

<img src="https://drive.google.com/uc?export=download&id=1caqBFth6-DyKwrHTG3-F-lGak"

如何将公司徽标添加到Google网络应用？

1 个答案: