如何在单个 HTML/PHP 文件中嵌入图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2329364/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to embed images in a single HTML / PHP file?
提问by Tatu Ulmanen
I am creating a lightweight, single-file database administration tool and I would like to bundle some small icons with it. What is the best way to embed images in a HTML/PHP file?
我正在创建一个轻量级的单文件数据库管理工具，我想将一些小图标与它捆绑在一起。在 HTML/PHP 文件中嵌入图像的最佳方法是什么？
I know a method using PHP where I would call the same file with a GET parameter that would output hardcoded binary data with the correct header, but that seems a bit complicated.
我知道一种使用 PHP 的方法，我将使用 GET 参数调用同一个文件，该参数将输出带有正确标头的硬编码二进制数据，但这似乎有点复杂。
Can I use something to pass the image directly in a CSS background-imagedeclaration? This would allow me to utilize the CSS sprite technique.
我可以使用某些东西直接在 CSSbackground-image声明中传递图像吗？这将允许我利用 CSS 精灵技术。
Browser support isn't an issue here, so more exotic methods are welcome also.
浏览器支持在这里不是问题，因此也欢迎使用更多奇特的方法。
EDIT
编辑
Does someone have a link/example to how to generate Data URL's properly with PHP? I'd figure echo 'data:image/png;base64,'.base64_encode(file_get_contents('image.png'))would suffice but I could be wrong.
有人有如何使用 PHP 正确生成数据 URL 的链接/示例吗？我想echo 'data:image/png;base64,'.base64_encode(file_get_contents('image.png'))就足够了，但我可能是错的。
回答by Pascal MARTIN
A solution to embed an image directly in an HTML page would be to use the data URI scheme
直接在 HTML 页面中嵌入图像的解决方案是使用数据 URI 方案
For instance, you could use some portion of HTML that looks like this :
例如，您可以使用如下所示的 HTML 部分：
<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />
There are other solutions on the wikipedia page I linked to :
我链接到的维基百科页面上还有其他解决方案：
- including the image as a CSS rule
- Using some Javascript.
- 包括图像作为 CSS 规则
- 使用一些 Javascript。
But note those solutions will not work on all browsers -- up to you to decide whether this is acceptable or not, in your specific situation.
但请注意，这些解决方案不适用于所有浏览器——由您决定是否可以接受，具体取决于您的具体情况。
Edit :to answer the question you asked about "how to generate Data URL's properly with PHP", take a look a bit lower in the wikipedia page about the Data URI scheme, which gives this portion of code (quoting):
编辑：要回答您提出的有关“如何使用 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" />
回答by Hyman
回答by Steve-o
For one PHP server side script try a base64 encode of the graphic and use a simple controller-style logic:
对于一个 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;
...
}
?>
