JavaScript로 이미지 표시

Siddharth Swami 2022년1월15일

JavaScript JavaScriptImage

JavaScript는 웹 개발 언어로 알려져 있습니다. JavaScript를 사용하여 이미지를 삽입하여 웹 페이지를 매력적으로 만들 수 있습니다.

기본적으로 HTML에서 <img> 태그를 사용하여 이미지를 표시합니다. <img> 태그에는 src라는 메서드가 있는데, 이는 우리가 표시하기 위해 제공한 이미지의 소스를 가져오는 데 도움이 됩니다. src에서 이미지의 전체 경로를 제공해야 합니다. 그렇지 않으면 오류가 발생합니다. 이미지의 너비, 높이도 지정해야 합니다.

JavaScript에는 자체 img 태그가 있어 웹페이지에 이미지를 삽입할 수 있습니다. 재사용 가능한 함수를 만들 수 있습니다. 여기서 우리는 img 요소를 다시 사용하지만 다르게 사용할 것입니다.

이미지의 source, width, height, alt와 같은 매개변수로 구성된 display_image()라는 함수를 만들 것입니다. 함수에서 요소를 생성하기 위해 createElement()를 사용할 것입니다. 이렇게 하면 이 함수를 호출할 때마다 이미지를 동적으로 표시할 수 있습니다.

예를 들어,

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
function display_image(src, width, height, alt) {
    var a = document.createElement("img");
    a.src = src;
    a.width = width;
    a.height = height;
    a.alt = alt;
    document.body.appendChild(a);
}
display_image('JavaScript.jpg', 
                 276, 
                 110, 
                 'JavaScriptImage');
</script>
</body>
</html>

출력:

JavaScript로 이미지 표시

위의 예는 제공된 소스를 기반으로 웹 페이지에 이미지를 표시합니다. document.body.appendChild() 함수는 웹 페이지 본문에 주어진 요소를 추가합니다.