HTML로 Base64 이미지 표시
이 튜토리얼에서는 HTML로 base64 이미지를 표시하는 방법을 소개합니다. Base64 이미지는 base64 인코딩 알고리즘으로 변환된 읽을 수 있는 문자열입니다.
img 태그를 사용하여 HTML로 Base64 이미지 표시
img 태그를 사용하여 HTML 문서에 Base64로 인코딩된 이미지를 포함할 수 있습니다. 브라우저가 더 작은 이미지에 대해 추가 페이지 로드 요청을 할 필요가 없기 때문에 페이지가 더 빨리 로드되므로 유용합니다. img 태그의 src 속성에서 이미지의 URL을 지정할 수 있습니다. src 속성에 이미지에 대한 정보를 제공하여 base64 이미지를 표시할 수 있습니다. src 속성에서 정확한 컨텐츠 유형, 컨텐츠 인코딩 및 문자 집합을 정의해야 합니다. 구문은 아래와 같습니다.
data:[content-type][;charset],<data>
문자열이 PNG 이미지임을 나타내는 image/png로 콘텐츠 유형을 지정할 수 있습니다. 그런 다음 charset을 base64로 지정할 수 있습니다. 세미콜론은 콘텐츠 유형과 문자 집합을 구분합니다. 그런 다음 이미지의 base64 문자열을 지정할 수 있습니다. this와 같은 도구를 사용하여 이미지를 base64 이미지로 변환할 수 있습니다. 여기 링크에서 사용자 정의 base64 이미지를 만들 수도 있습니다. 이런 식으로 img 태그를 사용하여 HTML에서 base64 이미지를 표시할 수 있습니다.
예제 코드:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAJUlEQVR42u3NQQEAAAQEsJNcdFLw2gqsMukcK4lEIpFIJBLJS7KG6yVo40DbTgAAAABJRU5ErkJggg==">
base64_encode() PHP 함수를 사용하여 HTML을 사용하여 Base64 이미지 표시
base64_encode() PHP 함수를 사용하여 이미지를 base64 문자열로 인코딩할 수 있습니다. mime_content_type() 함수는 제공된 데이터의 콘텐츠 유형을 반환합니다. 이 함수를 사용하여 img 태그에 대한 src를 생성할 수 있습니다. 따라서 base64 이미지를 표시할 수 있습니다. file_get_contents() 함수를 사용하여 base64 문자열로 변환할 이미지를 읽을 수 있습니다.
예를 들어 $img 변수를 만들고 이미지의 URL을 저장합니다. 다음으로 file_get_contents() 함수를 사용하여 이미지를 읽고 base64_encode() 함수를 사용하여 이미지를 base64 문자열로 변환합니다. 다음으로 img 변수의 mime_content_type() 함수를 사용하여 컨텐츠 유형을 가져옵니다. 그런 다음 imgSrc 변수를 만들고 위의 구문에 따라 변수를 정렬합니다. 마지막으로 echo 기능을 사용하여 src 속성이 $ImgSrc 변수로 설정된 HTML img 태그를 표시합니다.
따라서 PHP를 사용하여 base64 이미지를 표시할 수 있습니다.
예제 코드:
$img = 'https://loremflickr.com/320/240';
$imgData = base64_encode(file_get_contents($img));
$imgSrc = 'data: ' . mime_content_type($img) . ';base64,' . $imgData;
echo '<img src="' . $imgSrc . '">';