[JavaScript] 자바스크립트에서 스크립트로 이미지 로딩하기

184_자바스크립트에서 스크립트로 이미지 로딩하기

[적용]

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

---

[문법]

속성	의미	타입
src	리소스 지정	문자열

---

[내용]

스크립트의 이미지 표시는 HTML 내 img 요소를 배치하고 src 속성에 문자열을 대입한다.

document.querySelector()로 요소를 참조하기 위해서는 해당 요소에 id 속성을 할당한다.

HTML 내 src 속성은 공백으로 처리할 수 있다.

 

img 요소는 기본적으로 페이지를 읽어 오는 시점에 자동으로 로딩되지만,

스크립트를 사용해 임의의 시점에 이미지를 표시할 수 있다.

HTML의 src 속성을 공백으로 설정해 두고 필요할 때 설정하여 사용하는 방법이다.

 

HTML                                                                                                                                                              index.html

<img id="myImageA" />
<img id="myImageB" />

JavaScript                                                                                                                                                          main.js

const imgA = document.querySelector('#myImageA');
imgA.src = 'imges/photo_a.jpg';

const imgB = document.querySelector('#myImageB');
imgB.src = 'imges/photo_b.jpg';

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김