我需要向客户端发送一个 base64 编码的字符串。因此，我打开并读取服务器上的图像文件，对其进行编码并将该数据与 image/jpeg 内容类型一起发送到浏览器。 PHP 示例:

$image      = $imagedir . 'example.jpg'; 
$image_file = fopen($image, 'r'); 
$image_data = fread($image_file, filesize($image)); 
header("Content-type: image/jpeg"); 
echo 'data:image/jpeg;base64,' . base64_encode($image_data); 

客户端，我正在调用:

var img     = new Image(); 
img.src     = "http://www.myserver.com/generate.php"; 
img.onerror = function(){alert('error');} 
$(img).appendTo(document.body); 

由于某种原因，这不起作用。 onerror 总是触发。例如，观察 FireBug Network task 告诉我我收到了正确的 header 信息和正确的传输字节值。

如果我将该数据作为 Content-type: text/plain 发送，它会工作，base64 字符串将显示在浏览器中(如果我直接调用脚本)。将该输出复制并粘贴到 src 元素的 <img> 中会按预期显示图像。

我在这里做错了什么？

解决方案

感谢 Pekka 指出我的错误。您不需要(您不能!)以这种方法将二进制图像数据编码为 base64 字符串。没有 base64 编码，它就可以工作。

请您参考如下方法:

如果您将内容类型设置为 image/jpeg，您应该只提供 jpeg 数据，而没有 base64 废话。但是您将结果视为 html。

您正在有效地构建一个数据 uri，这没问题，但正如您所指出的，仅作为一个 uri。所以保持内容类型不变 (text/html)，并且

echo '<img src="data:image/jpeg;base64,'.base64_encode($image_data).'">';