我在内联显示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属性的一部分。