Wie betten Sie Bilder in eine einzelne HTML/PHP-Datei ein?

Question

Ich erstelle ein leichtgewichtiges Datenbankverwaltungstool für eine einzige Datei und möchte einige kleine Symbole damit kombinieren. Was ist der beste Weg, Bilder in eine HTML/PHP-Datei einzubetten?

Ich kenne eine Methode mit PHP, wo ich die gleiche Datei mit einem GET-Parameter aufrufen würde, die hartcodierte Binärdaten mit dem richtigen Header ausgeben würde, aber das scheint ein bisschen kompliziert.

Kann ich etwas verwenden, um das Bild direkt in einer CSS background-image Deklaration zu übergeben? Dies würde mir erlauben, die CSS-Sprite-Technik zu verwenden.

Browser-Unterstützung ist hier kein Problem, daher sind auch exotische Methoden willkommen.

EDIT

Hat jemand einen Link/Beispiel, wie Daten-URL richtig mit PHP zu generieren? Ich würde echo 'data:image/png;base64,'.base64_encode(file_get_contents('image.png')) würde ausreichen, aber ich könnte falsch liegen.

Answer 1

Eine Lösung ein Bild direkt in einer HTML-Seite einbetten die data URI scheme

Zum Beispiel wäre die Verwendung, könnten Sie einen Teil von HTML verwenden, die wie folgt aussieht:

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

Es gibt andere Lösungen auf der Wikipedia-Seite, die ich verknüpfte:

einschließlich des Bildes als CSS-Regel

Mit etwas Javascript.

Aber beachten Sie, dass diese Lösungen nicht auf allen Browsern funktionieren - bis zu Ihnen zu entscheiden, ob dies akzeptabel ist oder nicht, in Ihrer speziellen Situation.

Edit: die Frage, die Sie gefragt zu beantworten sehen, etwas niedriger in der Wikipedia-Seite über die Data URI scheme, die diesen Teil des Codes „wie Daten-URLs ordnungsgemäß mit PHP zu generieren“ gibt (Zitat):

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

So ähnlich?

http://www.sveinbjorn.org/dataurls_css

Answer 3

Für eine PHP Server-Seite Skript eine base64 kodieren der Grafik versuchen, eine einfache Controller-Stil Logik verwenden:

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