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

Posted 2023-02-24

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

【英文标题】：How to embed images in a single HTML / PHP file?

【发布时间】：2011-01-20 17:22:44

【问题描述】：

我正在创建一个轻量级的单文件数据库管理工具，我想将一些小图标与它捆绑在一起。在 html/php 文件中嵌入图像的最佳方法是什么？

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

我可以使用一些东西直接在 CSS background-image 声明中传递图像吗？这将允许我利用 CSS sprite 技术。

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

编辑

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

【问题讨论】：

是的，base64_encode(file_get_contents()) 是要走的路。你可以chunk_split()它，但这不是必须的。

顺便说一下：IE6 和 7 不支持 data: URI，IE8 只支持一些字节的最大长度（具体值忘记了，但对于中等大小的图像来说肯定太少了)。

【参考方案1】：

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

?>

【参考方案2】：

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

例如，您可以使用如下所示的 HTML 部分：

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

我链接到的***页面上还有其他解决方案：

包含图片作为 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'); ?>"  />

【参考方案3】：

这样的？

http://www.sveinbjorn.org/dataurls_css