在没有 src URL 的网页中显示图像答案

【问题标题】：Displaying images in webpage without src URL在没有 src URL 的网页中显示图像
【发布时间】：2011-05-30 13:05:52
【问题描述】：

最近我了解到我可以在网页中显示图像而无需引用图像 URL，如下所示：

<img class="disclosure" img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oIGRQbOY8MjgMAAABVSURBVBjTfc6xDcAwCETRM0rt5nbA+49j70DDAqSLsGXyJQqkVxxwNOeMiEA+waW1VuT/inrvG7wikht8UETy2ygVMjO4O8YYTf6AqrZyUwYlygAAXo+QLmeF4c4uAAAAAElFTkSuQmCC">

我有另一个想要显示的小 bmp 图像，所以我在 vim 中打开它，img 源看起来像：

当我将此代码粘贴到需要粘贴的地方时，我只会得到“BMڀ”

如何正确转换/粘贴此代码以用作图像源？

【问题讨论】：

标签： html image google-chrome unicode

【解决方案1】：

图片数据必须是base64编码的。

【讨论】：

【解决方案2】：

你需要用 Base64 编码

http://www.motobit.com/util/base64-decoder-encoder.asp

你还必须在...中更改 (png)

<img src="data:image/png;base64,

根据图像文件类型。

这是一个PHP的小函数，没有测试过。

function encode64($file){
    $extension = explode(".", $file);
    $extension = end($extension);

    $binary = fread(fopen($file, "r"), filesize($file));

    return '<img src="data:image/'.$extension.';base64,'.base64_encode($binary).'"/>';
}

echo encode64("test.bmp");

    function encode64($file){
        $binary = fread(fopen($file, "r"), filesize($file));
        return(base64_encode($binary));
    }

echo '<img src="data:image/bmp;base64,'.encode64("test.bmp").'"/>';

测试了我的第二个功能...效果很好...http://debconf11.com/so.php

【讨论】：

谢谢！我似乎无法通过 CSS 或标签属性设置任何尺寸，这种方法可以吗？无论如何，这种图像的表示形式是什么？
当然可以，但是你必须手动设置图像类型。看看我的回答。
虽然这是一个显示工作原理的有用答案，但将 Gaby Petrioli 的答案标记为已接受的答案可能更有意义，因为它鼓励重用预先存在的技术，而不是可能经过测试的技术并且适用于是否使用 PHP。
在Windows上，默认安装了CertUtil，很简单：CertUtil -encode input.png output.txt

【解决方案3】：

您可以使用在线实用程序，例如

http://software.hixie.ch/utilities/cgi/data/data

或

http://www.sveinbjorn.org/dataurlmaker

用于转换。

【讨论】：

【解决方案4】：

要获得图像的 Base64 编码，您可以使用 imagemagick 的 convert 命令和 INLINE: output format。

例如：

convert YourImage.png INLINE:PNG:YourImage_base64.txt

现在您只需在 HTML 页面中添加 <img src=" 和 "> 在“YourImage_base64.txt”文件的内容周围。

或者你也可以直接全部写入STDOUT，直接添加到你的HTML文件末尾：

echo "<img src=\"$(convert YourImage.png INLINE:PNG:-)\">" >> some.html

【讨论】：