Làm cách nào để nhúng tệp .png vào "tệp.html" trống để khi bạn mở tệp đó trong bất kỳ trình duyệt nào bạn thấy hình ảnh đó? Trong trường hợp này, tệp hình ảnh không được liên kết đến từ HTML mà đúng hơn là dữ liệu hình ảnh được nhúng trong chính HTML.Tôi có thể nhúng hình ảnh .png vào trang html không?
Có một vài bộ mã hóa base64 trực tuyến để giúp bạn với điều này, điều này có lẽ là tốt nhất mà tôi đã nhìn thấy:
http://www.greywyvern.com/code/php/binary2base64
Là trang hiển thị tùy chọn chính của bạn cho điều này là CSS:
div.image {
width:100px;
height:100px;
background-image:url(data:image/png;base64,iVBORwA<MoreBase64SringHere>);
}
Hoặc <img> thẻ chính nó, như thế này:
<img alt="My Image" src="data:image/png;base64,iVBORwA<MoreBase64SringHere>" />
Tìm kiếm nhanh trên google cho biết bạn có thể nhúng nó như thế này:
<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">
Nhưng bạn cần triển khai khác trong Internet Explorer.
http://www.websiteoptimization.com/speed/tweak/inline-images/
Lưu ý rằng thao tác này sẽ chỉ hoạt động với hình ảnh nhỏ. Hình ảnh càng lớn thì chuỗi được mã hóa càng lớn và có giới hạn về thời lượng 'src' có thể được. Và ngoài việc đó, nó là uggly imho :) – Alec
sử dụng mod_rewrite để chuyển hướng cuộc gọi đến file.html để image.png mà không có sự thay đổi url cho người sử dụng
bạn đã cố gắng chỉ đổi tên các tập tin image.png để file.html? Tôi nghĩ hầu hết các trình duyệt đều có tiêu đề phụ trên phần mở rộng của tập tin :)
Tôi biết Firefox làm điều đó, trong khi IE sẽ xem xét tập tin đó – Rangoric
Nếu bạn không sử dụng Apache thì sao? máy chủ web ở tất cả (ví dụ: email HTML)? –
Phương pháp 64base cũng hoạt động với hình ảnh lớn, tôi sử dụng phương pháp đó để nhúng tất cả hình ảnh vào trang web của tôi và nó hoạt động mọi lúc. Tôi đã thực hiện với các tệp có kích thước tối đa kích thước 2Mb, jpg và png.
Tôi không biết bài đăng này đã ở đây bao lâu. Nhưng tôi tình cờ gặp vấn đề tương tự. Do đó đăng các giải pháp để nó có thể giúp đỡ người khác.
#!/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
Tuy nhiên, bạn phụ thuộc vào trình duyệt web được sử dụng cho dù nó hoạt động hoàn hảo hay không. – BalusC
@BalusC - Đúng, nhưng đó là câu hỏi được yêu cầu ... không phải bất kỳ tùy chọn nào ngoại trừ tuyến đường tệp bên ngoài bình thường. –
Điều này dường như không hoạt động đối với tôi trong chrome .. :(Tự hỏi nếu dữ liệu base64 sai .. :( – WORMSS