Question

我有4张图片都有与之关联的超链接。我正在尝试从Google电子表格中提取图片链接和超链接，以显示在网络应用中。

超链接正好拉了，但是当我尝试拉动图像的链接时出现错误。我在线搜索，所有解决方案似乎都不适合我。如何从Google电子表格中提取链接并将其设置为图像来源？

这是我收到的错误：无法设置属性'src'为null

这是我的一大块代码：

<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();

Answer 1

innerHTML中的data[1][2]一定是错的。使用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];

从标识为<a>的{{1}}标记中删除所有原始HTML，并将其替换为link1次返回。因此，如果data[1][2]为空，则data[1][2] ID不再存在<img>标记。所以，当你试图得到它时，它是空的。因此错误消息：

无法设置null的属性'src'

我假设oneS只是链接，而不是HTML内部的链接。您为HTML分配的内容不仅仅是URL地址。您要分配的内容需要：

data[1][2]

硬编码它看起来像这样：

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

如果您从电子表格中获取的内容只是网址，则可以使用文字公式来创建HTML

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

HTML服务为图像分配URL

1 个答案: