JavaScript를 사용하여 이미지 요소를 만드는 방법은 무엇입니까?

Originally posted here!

Image() 생성자 함수 사용

JavaScript를 사용하여 이미지 요소를 생성하려면 전역Image() 객체에서 사용 가능한 window 생성자 함수를 사용할 수 있습니다.

// create an image element
const image = new Image();

생성자 함수는 2개의 매개변수를 허용합니다.

첫 번째 매개변수는 이미지의 너비입니다

.

두 번째 매개변수는 이미지의 높이입니다.

// create an image element
const image = new Image(200, 200);

이제 이미지 요소의 소스를 지정해야 합니다. src 개체의 image 속성을 사용하여 이를 수행할 수 있습니다.

// create an image element
const image = new Image(200, 200);

// source for the image element
// source means the link to the image
image.src = "https://via.placeholder.com/200";

속성 이름 뒤에 점.을 사용하여 이미지 요소에 속성을 추가할 수 있습니다.

예를 들어 alt 속성을 추가하려면 다음과 같이 alt 개체에서 image 속성을 사용할 수 있습니다.

// create an image element
const image = new Image(200, 200);

// source for the image element
// source means the link to the image
image.src = "https://via.placeholder.com/200";

// adding alt attribute
image.alt = "A simple placeholder image";

document.createElement() 함수 사용

또는 다음과 같은 document.createElement() 메서드를 사용하여 이미지 요소를 만들 수 있습니다.

// create image element
const image = document.createElement("img");

메서드에는 유효한 태그 이름이 문자열로 필요합니다.

src 및 alt 태그를 추가하려면 다음과 같이 점. 연산자 다음에 속성 이름을 사용해야 합니다.

// create image element
const image = document.createElement("img");

// add attributes src and alt
image.src = "https://via.placeholder.com/200";
image.alt = "A simple placeholder image";

JSBin의 양방향 라이브 예를 참조하십시오.

😃 유용하셨다면 공유해 주세요.