HOWTO · JavaScript
JavaScript의 URL에서 이미지 로드
오늘 포스트에서는 자바스크립트에서 지정된 URL에서 이미지를 로드하는 방법에 대해 알아보겠습니다.
이 페이지의 내용
오늘의 게시물은 JavaScript에서 지정된 URL에서 이미지를 로드하는 방법에 대해 설명합니다.
JavaScript의 URL에서 이미지 로드
이미지 태그의 HTML 요소는 문서에 사진/이미지를 포함합니다. src 속성은 포함해야 하는 사진/이미지에 대한 방향을 전달합니다.
Src는 이미지 요소에 필요한 이미지의 URL입니다.
srcset을 지원하는 브라우저에서 src는 픽셀 밀도 설명자가 srcset에 이미 정의되어 있거나 srcset에 w 설명자가 포함되어 있지 않은 경우 1x 픽셀 밀도 설명자가 있는 후보 이미지로 처리됩니다.
다음은 웹에서 가장 일반적으로 사용되는 이미지 파일 형식의 목록입니다.
APNG- 애니메이션 휴대용 네트워크 그래픽GIF- 그래픽 교환 형식PNG- 휴대용 네트워크 그래픽WebP- 웹 그림 형식SVG- 확장 가능한 벡터 그래픽JPEG- 공동 사진 전문가 그룹 이미지AVIF-AV1이미지 파일 형식
WebP 및 AVIF와 같은 형식은 정지 이미지와 애니메이션 이미지 모두에서 PNG, JPEG 및 GIF보다 훨씬 잘 작동하므로 권장됩니다. WebP는 Safari에서 널리 지원되는 반면 AVIF는 Safari에서 지원되지 않습니다.
‘SVG’는 여전히 다양한 크기로 정확하게 그려야 하는 이미지에 권장되는 형식입니다. 이미지에 대한 문서에서 더 많은 정보를 찾을 수 있습니다.
다음 예를 통해 이해해 봅시다.
<input type="text" value="helloworld" id="imageName"/>
<input type="button" id="insert-btn" value="Insert" />
document.getElementById('insert-btn').onclick = function() {
const val = document.getElementById('imageName').value;
const src = 'https://google.com/images/' + val + '.png';
let imgTag = document.createElement('img');
imgTag.src = src;
document.body.appendChild(imgTag);
}
사용자가 특정 이미지에 대한 값을 동적으로 입력할 수 있는 위의 예 내에서 입력 요소를 정의했습니다. 입력 옵션 대신 선택 드롭다운을 제공하고 사용자 선택에 따라 이미지를 변경할 수 있습니다.
사용자가 버튼을 누르면 사용자 선택을 받고 문서에 대한 img 요소를 생성합니다. 이미지의 위치 또는 경로를 src 속성으로 설정하고 이미지 요소를 기존 DOM에 자식으로 추가합니다.
