代码之家 › 专栏 › 技术社区 › Tatu Ulmanen

如何在单个HTML/PHP文件中嵌入图像?

embed png image html php

Tatu Ulmanen · 技术社区 · 15 年前

我正在创建一个轻量级的单文件数据库管理工具,我想用它捆绑一些小图标。在HTML/PHP文件中嵌入图像的最佳方法是什么?

我知道一个使用PHP的方法,在这里我将使用get参数调用相同的文件,该参数将以正确的头输出硬编码二进制数据,但这看起来有点复杂。

我能用CSS直接传递图像吗 background-image 宣言?这将允许我使用CSS sprite技术。

浏览器支持在这里不是一个问题,因此也欢迎使用更奇特的方法。

编辑

是否有人有一个链接/示例,如何用PHP正确生成数据URL?我想 echo 'data:image/png;base64,'.base64_encode(file_get_contents('image.png')) 就够了,但我可能错了。

3 回复 | 直到 14 年前

Pascal MARTIN 15 年前

将图像直接嵌入HTML页面的解决方案是使用 data URI scheme

例如,您可以使用如下HTML的某些部分:

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

我链接到的维基百科页面上还有其他解决方案:

将图像包含为CSS规则
使用一些javascript。

但是请注意,这些解决方案在所有浏览器上都不起作用——由您决定在您的特定情况下,这是否可以接受。

编辑: 回答你问的问题 “如何用PHP正确生成数据URL” 在维基百科的网页上看一看 Data URI scheme ,它给出了这部分代码 (引证) :

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" />

Jack 15 年前

像这样?

http://www.sveinbjorn.org/dataurls_css

Steve-o 15 年前

对于一个PHP服务器端脚本,尝试对图形进行base64编码,并使用简单的控制器样式逻辑:

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