HTML 페이지에 .png 이미지를 내장할 수 있습니까?
어떻게 하면 빈 "file.html"에 .png 파일을 내장하여 브라우저에서 해당 파일을 열면 해당 이미지를 볼 수 있습니까?
이 시나리오에서는 이미지 파일이 HTML에서 에 연결되지 않고 이미지 데이터가 HTML 자체에 포함됩니다.
온라인에는 이 문제를 해결하는 데 도움이 되는 Base64 인코더가 몇 개 있는데, 이것이 제가 본 것 중 가장 좋은 것일 것입니다.
http://www.greywyvern.com/code/php/binary2base64
이 페이지에서 볼 수 있듯이 이에 대한 주요 옵션은 CSS입니다.
div.image {
width:100px;
height:100px;
background-image:url(data:image/png;base64,iVBORwA<MoreBase64SringHere>);
}
아니면<img>다음과 같은 태그 자체:
<img alt="My Image" src="data:image/png;base64,iVBORwA<MoreBase64SringHere>" />
64base 방법은 큰 이미지에도 사용할 수 있습니다.저는 그 방법을 사용하여 모든 이미지를 제 웹사이트에 포함시키고, 그것은 매번 작동합니다.JPEG와 PNG의 2MB 크기의 파일로 해보았습니다.
저는 지금 비슷한 문제를 우연히 발견했고 그 해결책은 다음과 같습니다.
#!/usr/bin/env perl
use strict;
use warnings;
use utf8;
use GD::Graph::pie;
use MIME::Base64;
my @data = (['A','O','S','I'],[3,16,12,47]);
my $mygraph = GD::Graph::pie->new(200, 200);
my $myimage = $mygraph->plot(\@data)->png;
print <<end_html;
<html><head><title>Current Stats</title></head>
<body>
<p align="center">
<img src="data:image/png;base64,
end_html
print encode_base64($myimage);
print <<end_html;
" style="width: 888px; height: 598px; border-width: 2px; border-style: solid;" /></p>
</body>
</html>
end_html
HTML과 같은 다른 답변에 나열된 방법을 사용하여 이미지를 포함할 수 있습니다.
<img alt="My Image" src="data:image/png;base64,base64-data-goes-here" />
또는 CSS
div#my-image {
width:150px;
height:100px;
background-image:url(data:image/png;base64,base64-data-goes-here);
}
Base64 인코딩의 경우 Linux에서 I는 표준을 사용합니다.base64래핑이 꺼진 도구는 다음과 같습니다.
base64 -w 0 my-image.png
출력 텍스트를 verbatim으로 복사/수정합니다.
빠른 Google 검색에 따르면 다음과 같이 포함할 수 있습니다.
<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7"
width="16" height="14" alt="embedded folder icon">
그러나 Internet Explorer에서는 다른 구현이 필요합니다.
http://www.websiteoptimization.com/speed/tweak/inline-images/
mod_rewrite를 사용하여 호출을 file.html에서 image로 리디렉션합니다.사용자의 URL을 변경하지 않고 png.
방금 image.png 파일의 이름을 file.html로 변경해 보셨습니까?대부분의 브라우저는 파일 확장자보다 마임 헤더를 사용하는 것 같습니다 :)
당신은 당신의 장치나 웹에서 html에 jpg 이미지나 어떤 종류의 이미지도 넣을 수 있는 것처럼 png 이미지를 내장할 수 있습니다.
단말기에 저장할 때 이미지 유형이 png인지 확인합니다.이것은 같은 방법이지만 나는 그것을 jpg로 내장합니다.<embed type="image/jpg" src="https://s3-us-west-2.amazonaws.com/textimgs/music/250px-Antonio_Vivaldi.jpg" width="500" height="500">
</EMBED>묻고 답할 수 있게 해준 스택 오버플로 덕분에 고맙다고 말하고 싶어요!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
언급URL : https://stackoverflow.com/questions/2807251/can-i-embed-a-png-image-into-an-html-page
'it-source' 카테고리의 다른 글
| 현재 노드 버전 확인 (0) | 2023.07.25 |
|---|---|
| PHP: 배열을 값의 길이로 정렬하시겠습니까? (0) | 2023.07.25 |
| 단일 열 쿼리에 대한 DECODE(BLAH, [COLUMNT NUMBER])를 사용합니다.어떻게 작동합니까? (0) | 2023.07.25 |
| 삭제 - 대상 테이블을 지정할 수 없습니다. (0) | 2023.07.25 |
| 스프링 부팅 시 캐시 다시 로드/새로 고침 (0) | 2023.07.25 |