图像未从服务器 HTML/JS 中提取答案

【问题标题】：image not pulling from server HTML/JS图像未从服务器 HTML/JS 中提取
【发布时间】：2020-10-23 23:40:43
【问题描述】：

所以这个问题很难在谷歌上描述。长话短说，除了图像没有从服务器中提取之外，一切似乎都在工作。我上下扫描了我的代码，甚至查看了一个同学的代码，都找不到问题。任何其他时间我从 weblab 服务器调用图像时，它们都会拉取，但不是在这里。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Slide Show</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<script>
function switchImg(tools){
var t="";
var d="";
document.getElementById("tool").src= t;
document.getElementById("tool").alt= d;
if (tools==1){
    t = "/tools/saw.jpg";
    d = "Saw";
}
else if (tools==2){
    t = "/tools/chisels.jpg";
    d = "Chisels";
}
else if (tools==3){
    t = "/tools/pitchfork.jpg";
    d = "Pitchfork";
}
}
</script>

<style>
img{
display: block;
margin-left: auto;
margin-right: auto;
}
.buttons{
text-align: center;
}
</style>
</head>
<body>

<img id="tool" src="/tools/saw.jpg"  height="248" width="364" alt="Saw"/>


<br/>

<div class="buttons">
<button type="button"  onClick="switchImg(1);"> Saw </button>
<button type="button"  onClick="switchImg(2);"> Chisels </button>
<button type="button"  onClick="switchImg(3);"> Pitchfork </button>
</div>

<br/>




</body>
</html>

错误

就像 img 代码没有正确切换 src 或 alt。希望这里的某个人可能有一个解决方案，或者可能是我的代码中真正缺少的东西。非常感谢。

【问题讨论】：

标签： javascript html

【解决方案1】：

你需要在if条件块之后设置src和alt：

document.getElementById("tool").src = t;
document.getElementById("tool").alt = d;

考虑使用这种方式：

function switchImg(tools) {
  var t = "";
  var d = "";
  if (tools == 1) {
    t = "/tools/saw.jpg";
    d = "Saw";
  } else if (tools == 2) {
    t = "/tools/chisels.jpg";
    d = "Chisels";
  } else if (tools == 3) {
    t = "/tools/pitchfork.jpg";
    d = "Pitchfork";
  }
  document.getElementById("tool").src = t;
  document.getElementById("tool").alt = d;
}

此外，缓存元素可能会提高性能：

var img = document.getElementById("tool");
img.src = t;
img.alt = d;

【讨论】：

谢谢！！！ gahhh 这么简单的切换，但是让我问一下，为什么 document.getElementById("tool").src/alt = t/d; 必须在 if 语句之后出现？
@Snake780 是的，因为您是先设置值，然后再分配值。在分配时，它是空字符串。不客气！ ? 很高兴它有帮助。