Блог

Главная - Вопросы по программированию - Как мне изменить изображение с помощью javascript?

Как мне изменить изображение с помощью javascript?

#javascript #html

#javascript #HTML

Вопрос:

Я ожидаю, что мой код изменит изображение.

Я убедился, что тег script указан правильно.

 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">

Ошибка:

Неперехваченная ошибка типа: не удается установить для свойства ‘src’ значение null

Ответ №1:

Ваш скрипт, скорее всего, запускается до загрузки вашего 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>

Комментарии:

1. Вы также могли бы поместить тег script в заголовок с атрибутом «defer», если вы используете внешний скрипт.

Ответ №2:

Не уверен, в чем проблема, я воспроизвожу ее.

Возможно, вы поместили тег script в тег 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">

Ответ №3:

Живой пример переключения изображений:

 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>

Ссылка: