[책] 자바스크립트 코드 레시피 278 - 171일차

스크립트로 이미지 로딩하기

• 이미지를 로딩하여 사용하고 싶을 때

구문

src 리소스 지정

설명

스크립트의 이미지 표시는 HTML 내 img 요소를 배치하고 src 속성에 문자열을 대입합니다. document.querySelector() 로 요소를 참조하기 위해서는 해당 요소에 id 속성을 할당합니다. HTML 내 src 속성은 공백으로 처리할 수 있습니다.
img 요소는 기본적으로 페이지를 읽어 오는 시점에 자동으로 로딩되지만, 스크립트를 사용해 임의의 시점에 이미지를 표시할 수 있습니다. HTML의 src 속성을 공백으로 설정해 두고 필요할 때 설정하여 사용하는 방법입니다.

실습

index.html

<img src="" alt="" id="myimage_A">
<img src="" alt="" id="myimage_B">

---

script.js

const myimage_A = document.querySelector('#myimage_A');
myimage_A.src = '../image/photo_a.jpg';
const myimage_B = document.querySelector('#myimage_B');
myimage_B.src = '../image/photo_b.jpg';