(JS) 이미지의 src를 변경하는 방법

자바스크립트로 src 주소 변경 

HTML에서 Img 태그에 src로 지정된 이미지 주소를 자바스크립트를 사용하여 바꾸는 방법에 대해 알아보도록 하겠습니다.

Html

<div class="img-container">
 <img src="./imgaes/example.svg"/>
</div>

html의 img 태그 src 주소는 example.svg 입니다. 이제 자바스크립트로 다른 주소를 할당해주도록 하겠습니다.

Javascript

$img = document.querySelector(".img-container > img");
$img.src = `./imgaes/another.svg`;

JQuery

JQuery를 사용해 위에 코드를 한 줄로 작성할 수 있습니다.

$(".img-container > img").attr({ src: "./images/blog-logo.svg" });

클래스를 추가하려면 아래와 같이 코드를 작성해주면 됩니다.

$(".img-container > img, .someClass > img").attr({ src: "./images/blog-logo.svg" });

---

오늘은 이렇게 HTML에서 Img 태그에 src로 지정된 이미지 주소를 자바스크립트를 사용하여 바꾸는 방법에 대해 알아보았습니다.

 

읽어주셔서 감사합니다🤟