如何以 HTML 显示 Base64 图像？

我在内联显示 Base64 图像时遇到问题。

有人可以指出我正确的方向吗？

<!DOCTYPE html>
<html>
  <head>
    <title>Display Image</title>
  </head>
  <body>
    <img style='display:block; width:100px;height:100px;' id='base64image'                 
       src='data:image/jpeg;base64, LzlqLzRBQ...<!-- base64 data -->' />
  </body>
</html>

答案

我怀疑当然是实际的 base64 数据，否则对我来说看起来不错。在类似的方案正在起作用的地方，请参见此小提琴。您可以尝试指定字符集。

<div>
  <p>Taken from wikpedia</p>
  <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
    AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
        9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>

您可以尝试使用base64 解码器查看 base64 数据是否正确。

您需要指定正确的 Content-type，Content-encoding 和 charset 之类的

data:image/jpeg;charset=utf-8;base64,

根据数据 URI 方案的语法：

data:[<media type>][;charset=<character set>][;base64],<data>

如果后端有 PHP，则可以使用以下代码：

$image = 'http://images.itracki.com/2011/06/favicon.png';
// Read image path, convert to base64 encoding
$imageData = base64_encode(file_get_contents($image));

// Format the image SRC:  data:{mime};base64,{data};
$src = 'data: '.mime_content_type($image).';base64,'.$imageData;

// Echo out a sample image
echo '<img src="'.$src.'">';