时间戳

首页 > 解决方案 > 图像未从服务器 HTML/JS 中提取

javascript - 图像未从服务器 HTML/JS 中提取

问题描述

所以这个问题在谷歌上很难描述。长话短说，除了图像没有从服务器中提取之外，一切似乎都在工作。我上下扫描了我的代码，甚至查看了一个同学的代码，都找不到问题。任何其他时间我从 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 一样。希望这里的某个人可能有一个解决方案，或者可能是我的代码中真正缺少的东西。非常感激。

标签： javascripthtml

解决方案

您需要在条件块之后设置srcand ：altif

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;

推荐阅读