Làm cách nào để nhúng hình ảnh vào một tệp HTML/PHP?

Question

Tôi đang tạo một công cụ quản trị cơ sở dữ liệu tệp đơn, nhẹ và tôi muốn gói một số biểu tượng nhỏ với nó. Cách tốt nhất để nhúng hình ảnh vào tệp HTML/PHP là gì?

Tôi biết một phương pháp sử dụng PHP, nơi tôi sẽ gọi cùng một tệp với tham số GET sẽ xuất dữ liệu nhị phân được mã hóa cứng với tiêu đề chính xác, nhưng điều đó có vẻ hơi phức tạp.

Tôi có thể sử dụng thứ gì đó để chuyển hình ảnh trực tiếp trong tuyên bố CSS background-image không? Điều này sẽ cho phép tôi sử dụng kỹ thuật CSS sprite.

Hỗ trợ trình duyệt không phải là vấn đề ở đây, do đó, nhiều phương pháp kỳ lạ cũng được chào đón.

EDIT

Liệu ai đó có một liên kết/ví dụ để làm thế nào để tạo ra URL của dữ liệu đúng với PHP? Tôi muốn con số echo 'data:image/png;base64,'.base64_encode(file_get_contents('image.png')) sẽ đủ nhưng tôi có thể sai.

Answer 1

Một giải pháp để nhúng một hình ảnh trực tiếp trong một trang HTML sẽ được sử dụng data URI scheme

Ví dụ, bạn có thể sử dụng một số phần của HTML mà trông như thế này:

<img src="data:image/png;base64, 
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP 
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA 
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J 
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq 
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0 
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" /> 

Có các giải pháp khác trên trang wikipedia tôi liên kết với:

• bao gồm hình ảnh dưới dạng quy tắc CSS
• Sử dụng một số Javascript.

Nhưng lưu ý các giải pháp đó sẽ không hoạt động trên tất cả các trình duyệt - tùy thuộc vào bạn để quyết định xem điều này có được chấp nhận hay không, trong trường hợp cụ thể của bạn.

Edit: để trả lời các câu hỏi mà bạn được hỏi về "làm thế nào để tạo ra dữ liệu của URL đúng với PHP", hãy xem thấp hơn một chút trong trang wikipedia về Data URI scheme, mang đến cho phần mã này (trích dẫn):

function data_uri($file, $mime) 
{ 
    $contents = file_get_contents($file); 
    $base64 = base64_encode($contents); 
    return ('data:' . $mime . ';base64,' . $base64); 
} 
?> 

<img src="<?php echo data_uri('elephant.png','image/png'); ?>" alt="An elephant" /> 

Answer 2

Một cái gì đó như thế này?

http://www.sveinbjorn.org/dataurls_css

Answer 3

Đối với một máy chủ PHP side script thử một mã hóa base64 của đồ họa và sử dụng một logic điều khiển mang phong cách đơn giản:

<? 
/* store image mime-type and data in script use base64 */ 
$images = array('photo.png' => array('mimetype' => 'image/png', 
            'data' => '...')); 
/* use request path, e.g. index.php/photo.png */ 
$action = substr($_SERVER['PATH_INFO'], 1); 
switch($action) { 
case (preg_match('/\.png$/', $action)?$action:!$action): 
    header("Content-Type: {$images[$action]['mimetype']}"); 
    /* use expires to limit re-requests on navigation */ 
    $expires = gmdate('D, d M Y H:i:s \G\M\T', filetime(__FILE__) + 365*24*60*60); 
    header("Expires: {$expires}"); 
    $data = base64_decode($images[$action]['data']); 
    header('Content-Length: ' . strlen($data)); 
    echo $data; 
    break; 
... 
} 
?>