如何在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数据是否正确。

你可以使用这个

 $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.'">';

你需要指定正确的内容types，内容编码和字符集

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

根据数据URIscheme的语法：

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

另请参阅http://danielmclaren.com/node/90

首先将您的图像转换为Base64（编码为Base64）。您可以在线或使用PHP脚本来完成。

转换后你会得到的结果

 iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx/PjjUmssAAAGASURBVHjatJaxTsMwEIbpIzDA6FaMMPYJkDKzVYU+QFeEGPIKfYU8AETkCYI6wANkZQwIKRNDB1hA0Jrf0rk6WXZ8BvWkb4kv99vn89kDrfVexBSYgVNwDA7AN+jAK3gEd+AlGMGIBFDgFvzouK3JV/lihQTOwLtOtw9wIRG5pJn91Tbgqk9kSk7GViADrTD4HCyZ0NQnomi51sb0fUyCMQEbp2WpU67IjfNjwcYyoUDhjJVcZBjYBy40j4wXgaobWoe8Z6Y80CJBwFpunepIzt2AUgFjtXXshNXjVmMh+K+zzp/CMs0CqeuzrxSRpbOKfdCkiMTS1VBQ41uxMyQR2qbrXiiwYN3ACh1FDmsdK2Eu4J6Tlo31dYVtCY88h5ELZIJJ+IRMzBHfyJINrigNkt5VsRiub9nXICdsYyVd2NcVvA3ScE5t2rb5JuEeyZnAhmLt9NK63vX1O5Pe8XaPSuGq1uTrfUgMEp9EJ+CQvr+BJ/AAKvAcCiAR+bf9CjAAluzmdX4AEIIAAAAASUVORK5CYII=

现在使用起来很简单。

你必须把它放在图像的src中，并在那里以base64编码的forms定义。

例：

 <img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx/PjjUmssAAAGASURBVHjatJaxTsMwEIbpIzDA6FaMMPYJkDKzVYU+QFeEGPIKfYU8AETkCYI6wANkZQwIKRNDB1hA0Jrf0rk6WXZ8BvWkb4kv99vn89kDrfVexBSYgVNwDA7AN+jAK3gEd+AlGMGIBFDgFvzouK3JV/lihQTOwLtOtw9wIRG5pJn91Tbgqk9kSk7GViADrTD4HCyZ0NQnomi51sb0fUyCMQEbp2WpU67IjfNjwcYyoUDhjJVcZBjYBy40j4wXgaobWoe8Z6Y80CJBwFpunepIzt2AUgFjtXXshNXjVmMh+K+zzp/CMs0CqeuzrxSRpbOKfdCkiMTS1VBQ41uxMyQR2qbrXiiwYN3ACh1FDmsdK2Eu4J6Tlo31dYVtCY88h5ELZIJJ+IRMzBHfyJINrigNkt5VsRiub9nXICdsYyVd2NcVvA3ScE5t2rb5JuEeyZnAhmLt9NK63vX1O5Pe8XaPSuGq1uTrfUgMEp9EJ+CQvr+BJ/AAKvAcCiAR+bf9CjAAluzmdX4AEIIAAAAASUVORK5CYII=">

这将显示基准64数据的图像：

 <style> .logo { width: 290px; height: 63px; background: url(data:image/png;base64,copy-paste-base64-data-here) no-repeat; } </style> <div class="logo"/>

发生在数据URI中的+字符应该被编码为％2B。这就像在URI中编码任何其他string一样。例如，当具有参数的URI作为另一个URI的一部分发送时，参数分隔符（？和＆）必须被编码。

你可以把你的数据直接放在一个url的声明中

 src = 'url(imageData)' ;

并获得图像数据ü可以使用PHPfunction

 $imageContent = file_get_contents("imageDir/".$imgName); $imageData = base64_encode($imageContent);

因此您可以复制粘贴imageData的值并将其直接粘贴到您的url并将其分配给图像的src属性

看起来你的数据url有一些错误。

你可以使用这个在线base64编码 / base64解码工具来编码你的图像embedded： http : //base64online.org/encode/

选中“格式化为数据URL”选项将base64数据格式化为URL。

我所做的就是使用img.jpg来结束url，以避免被caching，并且无法检查客户是否打开了一封电子邮件，整个url看起来像“ http://midomain.com/<Random letters numbers>/img.jpg “

使用随机的东西作为url的一部分，Google不会caching图片。最重要的部分是使用带有扩展名的有效图像名称结束URL。

这是我的Symfony代码（我认为这也适用于裸PHP）发送图像。

 $im = imagecreatetruecolor(1,1); $white = imagecolorallocate($im, 255, 255, 255); imagesetpixel ($im , 0 , 0 , $white); header('Content-Type: image/jpeg'); // Output the image imagejpeg($im); // Free up memory imagedestroy($im); exit;

exit是非常重要的，所以PHP不会发送任何东西。

如何在HTML中显示Base64图像？

在模板中使用内联关键字是否有意义？