我在内联显示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>
当前回答
通过将元素的src属性设置为data:image/[图像格式];Base64，[Base64数据]，可以在HTML中显示Base64图像。
在这个例子中，data:image/jpeg;base64, src属性的一部分指定了图像的格式(jpeg)和LzlqLzRBQ…部分是映像的Base64数据。
元素的style属性可用于指定图像的显示和大小属性。在这种情况下，display:block将使图像成为块级元素，宽度:100px;高度:100px;将图像的宽度和高度设置为100像素。
<!DOCTYPE html>
<html>
<head>
<title>Display Base64 Image</title>
</head>
<body>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" />
</body>
</html>
标签的src属性设置为data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==。这指定图像是PNG格式，Base64数据包含在Base64之后，这是src属性的一部分。
其他回答
这很简单。
手动编程base64映像(几乎)是不可能的，所以有一个web应用程序可以做到这一点。以下是应用程序的链接:https://www.opinionatedgeek.com/codecs/base64decoder(解码器适用于常规和url安全编码，它可以解码或编码您的文本/文档)
如您所说，它从data:image/jpeg;base64，开始。 下面是一个摘自维基百科的例子，但它只是一个例子。
< div > <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4 / / 8 / w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="红点" /> < / div >
我知道它只是输出一个红点，但当你没有足够的空间来包含图像或类似的东西时，它是有用的。
唯一的问题是这种类型的编码非常长，可能有20行。 希望这对你有所帮助!
您需要指定正确的Content-type、Content-encoding和字符集。
Like
data:image/jpeg;charset=utf-8;base64,
根据数据URI方案的语法:
data:[<media type>][;charset=<character set>][;base64],<data>
通过将元素的src属性设置为data:image/[图像格式];Base64，[Base64数据]，可以在HTML中显示Base64图像。
在这个例子中，data:image/jpeg;base64, src属性的一部分指定了图像的格式(jpeg)和LzlqLzRBQ…部分是映像的Base64数据。
元素的style属性可用于指定图像的显示和大小属性。在这种情况下，display:block将使图像成为块级元素，宽度:100px;高度:100px;将图像的宽度和高度设置为100像素。
<!DOCTYPE html>
<html>
<head>
<title>Display Base64 Image</title>
</head>
<body>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" />
</body>
</html>
标签的src属性设置为data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==。这指定图像是PNG格式，Base64数据包含在Base64之后，这是src属性的一部分。
你的数据URL好像有错误。
你可以使用这个在线Base64编码/ Base64解码工具来编码你的图像嵌入: http://base64online.org/encode/
检查“格式为数据URL”选项格式化base64数据为URL。
我怀疑的当然是实际的Base64数据。在我看来还不错。看看这把小提琴，类似的方案也在起作用。您可以尝试指定字符集。
< div > <p>摘自维基百科</p> <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4 / / 8 / w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="红点" /> < / div >
您可以尝试这个Base64解码器，看看您的Base64数据是否正确。
