Jak osadzać obrazy w jednym pliku HTML/PHP?

Question

Tworzę lekkie, jednoplikowe narzędzie do administrowania bazami danych i chciałbym dołączyć do niego kilka małych ikon. Jaki jest najlepszy sposób na osadzanie obrazów w pliku HTML/PHP?

Znam metodę używającą PHP, gdzie nazwałbym ten sam plik parametrem GET, który wyprowadzał zakodowane dane binarne z poprawnym nagłówkiem, ale to wydaje się nieco skomplikowane.

Czy mogę użyć czegoś do przekazania obrazu bezpośrednio w deklaracji CSS background-image? To pozwoliłoby mi wykorzystać technikę sprite CSS.

Obsługa przeglądarki nie jest tu problemem, więc bardziej pożądane są również bardziej egzotyczne metody.

EDIT

Czy ktoś ma link/przykład na to, jak do generowania danych URL poprawnie z PHP? Stwierdziłbym, że wystarczy echo 'data:image/png;base64,'.base64_encode(file_get_contents('image.png')), ale mogę się mylić.

Answer 1

Rozwiązaniem osadzić obrazu bezpośrednio na stronie HTML byłoby użyć data URI scheme

Na przykład, można użyć jakiś fragment kodu HTML, który wygląda tak:

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

Istnieją inne rozwiązania na stronie wikipedii, do której dowiązałem:

• w tym obraz jako reguła CSS
• Używanie JavaScript.

Pamiętaj jednak, że te rozwiązania nie będą działać we wszystkich przeglądarkach - do Ciebie należy decyzja, czy jest to dopuszczalne, czy nie, w konkretnej sytuacji.

Edit: odpowiedzieć na pytanie, pytał pan o „jak wygenerować dane URL poprawnie z PHP”, spójrz nieco niższy na stronie wikipedia o Data URI scheme, co daje tę część kodu (cytowanie):

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

Coś takiego?

http://www.sveinbjorn.org/dataurls_css

Answer 3

na jednym skrypt PHP po stronie serwera spróbować kodowanie base64 z grafiką i użyć prostego regulatora stylu logicznych:

<? 
/* 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; 
... 
} 
?>