자바스크립트 img 태그 src 속성 값 가져오기 및 설정

이미지를 웹 페이지에서 보여주거나 교체해야 할 때, 자바스크립트로 img 태그의 src 속성 값을 가져오고 설정할 수 있습니다. 이 글에서는 자바스크립트를 사용해 HTML 이미지 태그의 src 속성을 어떻게 다루는지 쉽게 설명하겠습니다.

1. src 속성 값 가져오기

HTML에서 이미지를 로드한 후, 해당 이미지의 src 값을 자바스크립트로 가져오는 것은 매우 간단합니다. 다음 코드를 살펴봅시다.

<img id="myImage" src="https://example.com/image1.jpg" alt="example image">

이제 자바스크립트로 src 값을 가져오는 방법은 다음과 같습니다.

const imgElement = document.getElementById('myImage');
const imgSrc = imgElement.src;
console.log(imgSrc); // 출력: https://example.com/image1.jpg

getElementById 메서드를 사용해 img 요소를 가져오고, 그 요소의 src 속성에 접근하면 됩니다.

한 줄 요약:

• 목적: 이미지의 현재 src URL을 가져오기
• 방법: imgElement.src로 src 값을 읽어오기

2. src 속성 값 설정하기

특정 이벤트(예: 버튼 클릭) 발생 시, 이미지를 동적으로 변경하고 싶다면 src 속성 값을 자바스크립트로 설정하면 됩니다. 예를 들어, 사용자가 버튼을 클릭했을 때 이미지를 교체하는 코드를 작성해 보겠습니다.

<img id="myImage" src="https://example.com/image1.jpg" alt="example image">
<button id="changeImageBtn">이미지 변경하기</button>

const imgElement = document.getElementById('myImage');
const changeImageBtn = document.getElementById('changeImageBtn');

changeImageBtn.addEventListener('click', function() {
    imgElement.src = "https://example.com/image2.jpg";
});

위 코드에서는 button 요소에 클릭 이벤트를 추가하고, 버튼이 클릭될 때 이미지의 src 속성 값을 새로운 URL로 변경합니다.

한 줄 요약:

• 목적: 이미지 교체
• 방법: imgElement.src = '새로운 URL'로 src 값 변경

3. 이미지가 로드되었는지 확인하기

이미지가 제대로 로드되었는지 확인하고 싶을 때는, load 이벤트를 사용할 수 있습니다. 예를 들어, 이미지가 변경된 후 성공적으로 로드되었는지 체크하는 코드를 작성해 볼까요?

imgElement.addEventListener('load', function() {
    console.log('이미지가 성공적으로 로드되었습니다!');
});

이렇게 하면 이미지가 로드된 후 자동으로 메시지가 출력됩니다. 반대로, 이미지 로드에 실패했을 경우에는 error 이벤트를 활용할 수 있습니다.

imgElement.addEventListener('error', function() {
    console.log('이미지 로드에 실패했습니다.');
});

4. 요약

• src 값 가져오기: imgElement.src로 현재 이미지를 가져옴.
• src 값 설정하기: imgElement.src = '새 URL'로 이미지를 변경.
• 로드 상태 확인: load 및 error 이벤트로 이미지가 정상적으로 로드되었는지 감지.

이와 같이 자바스크립트를 사용하면 이미지의 src 속성 값을 동적으로 가져오거나 설정하는 것이 매우 간단합니다. 웹 애플리케이션에서 이미지를 동적으로 관리하고 싶다면 위 내용을 참고하여 쉽게 적용해 보세요!