我在内联显示 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.'">';