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

如何在单个HTML/PHP文件中嵌入图像?,php,html,image,png,embed,Php,Html,Image,Png,Embed,我正在创建一个轻量级的单文件数据库管理工具,我想用它捆绑一些小图标。在HTML/PHP文件中嵌入图像的最佳方式是什么 我知道有一种使用PHP的方法,我会使用GET参数调用同一个文件,该参数将输出具有正确头的硬编码二进制数据,但这似乎有点复杂 我可以使用一些东西在CSS背景图像声明中直接传递图像吗?这将允许我使用CSS sprite技术 浏览器支持在这里不是问题,所以也欢迎更多的外来方法 编辑 是否有人提供了如何使用PHP正确生成数据URL的链接/示例?我想图echo'数据:image/png;b

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

我知道有一种使用PHP的方法,我会使用GET参数调用同一个文件,该参数将输出具有正确头的硬编码二进制数据,但这似乎有点复杂

我可以使用一些东西在CSS
背景图像
声明中直接传递图像吗?这将允许我使用CSS sprite技术

浏览器支持在这里不是问题,所以也欢迎更多的外来方法

编辑

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

类似的东西


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

例如,您可以使用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”的问题,请在维基百科页面的下方查看,其中给出了这部分代码(引用):

函数数据\u uri($file,$mime)
{  
$contents=file\u get\u contents($file);
$base64=base64_编码($contents);
返回('data:'.$mime.';base64'.$base64);
}
?>
“alt=”大象“/>

对于一个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;
...
}
?>

是的,
base64\u编码(file\u get\u contents())
是一个不错的选择。你可以
chunk\u split()
it,但这不是必需的。顺便说一句:IE6和7不支持
数据:
URI,IE8的最大长度只有几个字节(忘记了确切的值,但它肯定太小,无法提供中等大小的图像)。
<?
/* 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;
...
}
?>