HTML服务为图像分配URL

HTML Service Assign URL to Image

本文关键字：分配 URL 图像 服务 HTML      更新时间：2023-10-19

我有4个图像，它们都有关联的超链接。我正试图从谷歌电子表格中提取图像链接和超链接，以显示在网络应用程序中。

超链接拉过来很好，但当我试图拉图片的链接时，我遇到了一个错误。我在网上搜索过，所有的解决方案似乎都不适合我。我如何从谷歌电子表格中提取链接并将其设置为图像的来源？

这是我收到的错误：无法设置空的属性"src"

这是我的一大块代码：

<div align="center">
  <div class="contener_slideshow">
    <div class="contener_slide">
      <div class="slid_1"><a href="" target="blank" id="link1"><img id="oneS" src=""></a></div>
      <div class="slid_2"><a href="" target="blank" id="link2"><img id="twoS" src=""></a></div>
      <div class="slid_3"><a href="" target="blank" id="link3"><img id="threeS" src=""></a></div>
      <div class="slid_4"><a href="" target="blank" id="link4"><img id="fourS" src=""></a></div>
    </div>
  </div>
</div>

<script>
function onSuccess(data){
  var oneS = document.getElementById('link1');
  oneS.innerHTML = data[1][2];

try{  
  document.getElementById("oneS").src = data[1][1];
}catch(error){
  alert(error);
}
}
google.script.run.withSuccessHandler(onSuccess)
  .getData();

data[1][2]中的innerHTML一定是错误的。使用console.log()语句找出data[1][2]的值：

<script>
  function onSuccess(data){
    console.log('data: ' + data);
    console.log('data[1][2]: ' + data[1][2]);
    var oneS = document.getElementById('link1');
    oneS.innerHTML = data[1][2];

打开浏览器的控制台，运行代码并查看日志中打印的内容。

此行：

oneS.innerHTML = data[1][2];

从id为link1的<a>标记中删除所有原始HTML，并用data[1][2]返回的内容替换它。因此，如果data[1][2]为空，那么就不再有带有oneS id的<img>标记了。因此，当您试图获取它时，它是空的。因此错误消息：

无法设置空的属性"src"

我假设data[1][2]只是链接，而不是HTML内部的链接。您为HTML分配的内容不能仅仅是URL地址。你要分配的是：

<img id="oneS" src="the URL Here">

硬编码的它看起来像这样：

oneS.innerHTML = <img id="oneS" src="the URL Here">;

如果你从电子表格中得到的只是URL，你可以使用文本公式来创建HTML

var htmlToInject = "<img id='oneS' src='" + data[1][1] + "'>";
document.getElementById("oneS").src = htmlToInject;
相关文章：