[JS] 이미지 src 변경하는 방법

 

자바스크립트에서 이미지의 src를 바꾸는 방법을 소개하겠습니다.

 

html
<div class="imgBox">
  <img src="test.png" alt="test" title="test">
</div>

위와 같은 예시 html에서 이미지에 접근하는 간단한 방법은 querySelector 메서드를 이용하는 것입니다.

javascript
// JavaScript
$img = document.querySelector(".imgbox > img");

$img.src = `change.png`;

해당 메서드를 사용하여 img DOM 객체를 가져올 수 있으며, 해당 DOM 객체에서 src를 바꾸는 방법은 아래와 같습니다.

 

Jquery를 사용하면 아래와 같은 한 줄로 끝낼 수 있습니다.

 

javascript
$(`.imgBox > img`).attr({ src: "change.png" });