img 객체 생성

• img객체 생성 및 동적으로 이미지 생성

const body = document.querySelector('body');

const image = new Image();
//image객체가 생성되어 속성들을 추가할수 있음
image.src = `./img 파일 경로/${동적으로 파일 이름 생성 가능}`;
body.appendChild(image); 

• img 객체는 HTML 문서내에 있는 이미지에 관한 정보를 담고 있다.

<img src="이미지파일" name="이름" width="가로너비" height="세로높이" alt="그림설명">

위와 같은 태그에 의해 생성되는 객체이다.

• Image Method 사용 형식

document.images[i]
document.images.length
document.image-name

• Imge Method 생성자

new Image(width, height)

속성과 이벤트 핸들러

속성

• border : 이미지의 테두리 값
  형식 : document.img1.border

• complete : 이미지 로드가 완료 되었는지 여부(true/false)
  형식 : document.img1.complete

• height : 이미지의 높이
  형식 : document.img1.height

• width : 이미지의 가로크기
  형식 : document.img1.width

• hspace : 이미지의 수평여백
  형식 : document.img1.hspace

• vspace : 이미지의 수직여백
  형식 : document.img1.vspace

• length : 이미지의 갯수
  형식 : document.images.length

• lowsrc : lowsrc 로 설정한 이미지의 URL
  형식 : document.img1.lowsrc

• name : 이미지의 name
  형식 : document.img1.name

• src : 이미지의 URL
  형식 : document.img1.src

이벤트 핸들러

• onAbort : 사용자가 이미지 로딩을 중간에서 멈출때 발생하는 이벤트
  형식 : onAbort=alert('이미지를 읽다가 중단되었습니다.')

• onError : 이미지 로딩중 에러가 발생했을때
  형식 : onError=alert('이미지가 제대로 로딩되지 않았습니다.')

• onLoad : 이미지가 성공적으로 로딩되었을때
  형식 : onLoad=alert('이미지가 성공적으로 로딩 되었습니다.')

출처 : http://www.ministory.net/xe/?mid=it_story&category=3486&page=4&document_srl=3024