JavaScript의 URL에서 이미지 로드

오늘의 게시물은 JavaScript에서 지정된 URL에서 이미지를 로드하는 방법에 대해 설명합니다.

JavaScript의 URL에서 이미지 로드

이미지 태그의 HTML 요소는 문서에 사진/이미지를 포함합니다. src 속성은 포함해야 하는 사진/이미지에 대한 방향을 전달합니다.

Src는 이미지 요소에 필요한 이미지의 URL입니다.

srcset을 지원하는 브라우저에서 src는 픽셀 밀도 설명자가 srcset에 이미 정의되어 있거나 srcset에 w 설명자가 포함되어 있지 않은 경우 1x 픽셀 밀도 설명자가 있는 후보 이미지로 처리됩니다.

다음은 웹에서 가장 일반적으로 사용되는 이미지 파일 형식의 목록입니다.

1. APNG - 애니메이션 휴대용 네트워크 그래픽
2. GIF - 그래픽 교환 형식
3. PNG - 휴대용 네트워크 그래픽
4. WebP - 웹 그림 형식
5. SVG - 확장 가능한 벡터 그래픽
6. JPEG - 공동 사진 전문가 그룹 이미지
7. 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에 자식으로 추가합니다.

데모