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

Question

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

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

我可以使用某些东西直接在CSS background-image声明中传递图像吗？这将允许我使用CSS精灵技术.

浏览器支持在这里不是问题,因此也欢迎更多异国情调的方法.

编辑

有人有如何使用PHP正确生成数据URL的链接/示例吗？我觉得echo 'data:image/png;base64,'.base64_encode(file_get_contents('image.png'))这样就够了,但我错了.

Answer 1

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

例如,您可以使用看起来像这样的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"的问题,请在维基百科页面中查看一下有关数据URI方案的问题,该方案提供了这部分代码(引用):

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

像这样的东西？

http://www.sveinbjorn.org/dataurls_css