PNG 이미지를 HTML에 직접 포함하려면 어떻게 해야 합니까?

PNG 이미지를 HTML에 직접 통합

PNG 이미지를 HTML에 포함하면 외부 파일 참조 없이 브라우저 내에서 직접 표시할 수 있습니다. 이를 달성하려면 Base64 인코딩 기술을 활용하십시오.

PNG 이미지를 Base64로 인코딩합니다.

온라인 인코더를 사용하여 PNG 이미지를 Base64 문자열로 변환합니다. 이 문자열은 텍스트 형식의 바이너리 이미지 데이터를 나타냅니다.

Base64 문자열을 HTML에 통합:

CSS 옵션:

이미지에 대한 CSS 클래스를 정의하고 url() 함수와 Base64 문자열을 사용하여 background-image 속성을 설정합니다. 예:

<code class="css">div.image {
  width:100px;
  height:100px;
  background-image:url(data:image/png;base64,iVBORwA<MoreBase64StringHere>);
}</code>

이미지 태그 옵션:

또는 Base64 문자열을 태그:

<code class="html"><img alt="My Image" src="data:image/png;base64,iVBORwA<MoreBase64StringHere>" /></code>

PNG 이미지를 데이터 URI 구성표로 변환하므로 브라우저가 이미지를 직접 해석하고 표시할 수 있습니다.

위 내용은 PNG 이미지를 HTML에 직접 포함하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!