开发者问题收集

如何使用 javascript 更改图像？

2019-03-31
66
javascript html

我希望我的代码能够改变图像。

我已确保脚本标签正确无误。 

var x = document.getElementById("card_1_img");
x.src = "images/1.png"; //the error occurs here
<img id="card_1_img" width="100" height="50">

错误：

Uncaught TypeError: Cannot set property 'src' of null

3个回答

您的脚本很可能在 HTML 加载之前运行。请尝试将 <script> 标签放在页面底部，结束 </body> 之前： 

var x = document.getElementById("card_1_img");
x.src = "images/1.png";
<body>
  <img id="card_1_img" width="100" height="50">
  <script src="script.js"></script>
</body>
Jack Bashford
2019-03-31

不确定是什么问题，我重现了它。

可能是你将脚本标签放在了 head 标签中，而 img 标签没有创建。 

var x = document.getElementById("card_1_img");
    x.src = "https://hinhanhdephd.com/wp-content/uploads/2015/12/hinh-anh-dep-girl-xinh-hinh-nen-dep-gai-xinh.jpg";
<img id="card_1_img" width="100" height="50">
Hien Nguyen
2019-03-31

实时切换图片示例： 

let chromeImg = "https://www.w3schools.com/images/compatible_chrome.gif";
let firefoxImg = "https://www.w3schools.com/images/compatible_firefox.gif";

function change(browser) {
  let img = document.getElementById("browser");
  let name = document.getElementById("name");
  if (browser.src.includes("chrome")) {
    img.src = firefoxImg;
    name.textContent = "FireFox";
  } else {
    img.src = chromeImg;
    name.textContent = "Chrome";
  }
}
img, p {
  margin-left: 50px;
}
<h5>Click on image below:</h5>
<img id="browser" onclick="change(this)" 
     src="https://www.w3schools.com/images/compatible_chrome.gif">
<p id="name"></p>

参考：

ℛɑƒæĿᴿᴹᴿ
2019-03-31