我有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;