如何将图像嵌入到单个HTML / PHP文件中？ [英] How to embed images in a single HTML / PHP file?

问题描述

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

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

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

浏览器支持在这里不是问题，所以更多的奇特方法也是受欢迎的。 b

编辑

有人有链接/示例来说明如何使用PHP正确生成数据URL？我想 echo'data：image / png; base64，'。base64_encode（file_get_contents（'image.png'））就足够了，但我可能错了。 p>

解决方案

直接在HTML页面中嵌入图片的解决方案是使用 data URI scheme

例如，您可以使用一些看起来像这样的HTML部分：

 < img src =data：image / png; base64，
 iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs + 9AAAABGdBTUEAALGP 
 C / xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV + IA 
 AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J 
 REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq 
 CH9 // q1uH4TLzw4d6 + ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0 
 vr4MkhoXe0rZigAAAABJRU5ErkJggg == ALT = 红点/> 
  

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

• 包含图片作为CSS规则


• 使用一些Javascript。
  
  
  

  但请注意，这些解决方案不适用于所有浏览器 - 由您决定是否可以接受，在您的具体情况。

  
  
  

  
  
  编辑：回答您问及关于如何正确使用PHP生成数据网址的问题，看看有点低关于数据URI方案的维基百科页面，它提供了这部分代码（
  
  $ p $ 函数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 =一头大象/>


  
  

  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?

  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.

  Can I use something to pass the image directly in a CSS background-image declaration? This would allow me to utilize the CSS sprite technique.

  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.

  解决方案

  A solution to embed an image directly in an HTML page would be to use the data URI scheme

  For instance, you could use some portion of HTML that looks like this :

  <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.

  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) :

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

  这篇关于如何将图像嵌入到单个HTML / PHP文件中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！