외부 파일 없이 PNG 이미지를 HTML에 직접 포함하는 방법은 무엇입니까?

HTML 페이지에 PNG 이미지 삽입

이미지 파일에 연결하지 않고 PNG 이미지를 HTML 페이지에 삽입하는 작업은 의문을 제기합니다. : 이미지 데이터를 HTML에 직접 통합하는 방법은 무엇입니까?

Base64 인코딩으로 포함

Base64 인코딩은 이미지를 HTML에 포함하는 솔루션을 제공합니다. 다양한 온라인 Base64 인코더가 있지만 http://www.greywyvern.com/code/php/binary2base64에 있는 것과 같은 강력한 인코더를 사용하는 것이 좋습니다.

이 도구는 두 가지 기본 임베딩 옵션을 제공합니다. : CSS 또는 태그.

CSS 임베딩

CSS에서는 다음과 같이 임베딩을 수행할 수 있습니다.

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

태그 삽입

또는 태그를 사용할 수 있습니다:

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

Base64 인코딩을 활용하면 PNG 이미지를 HTML 페이지에 직접 삽입할 수 있으므로 외부 이미지 파일 없이도 이미지를 표시할 수 있습니다.

위 내용은 외부 파일 없이 PNG 이미지를 HTML에 직접 포함하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!