如何在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>

当前回答

通过将元素的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属性的一部分。

2023-02-01 13:36:57

其他回答

你可以把你的数据直接放在url语句中，比如:

src = 'url(imageData)';

要获得图像数据，可以使用PHP函数:

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

$imageData = base64_encode($imageContent);

你可以复制粘贴imageData的值直接粘贴到你的URL并把它赋值给图像的src属性。

2012-10-21 18:46:51

数据URI中出现的+字符应该被编码为%2B。这类似于对URI中的任何其他字符串进行编码。例如，参数分隔符(?和&)必须在带有参数的URI作为另一个URI的一部分发送时进行编码。

2012-06-25 13:01:28

添加Base64数据:

在JavaScript中

var id = document.getElementById("image");

id.src = base64Url;

2020-07-21 14:54:33

试试这个吧:

let base64="iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
let buffer=Uint8Array.from(atob(base64), c => c.charCodeAt(0));
let blob=new Blob([buffer], { type: "image/gif" });
let url=URL.createObjectURL(blob);
let img=document.createElement("img");
img.src=url;
document.body.appendChild(img);

不推荐用于生产环境，因为它只与现代浏览器兼容。

2018-09-13 07:31:55

如果你在后端有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 . '">';

2014-02-06 14:55:34

如何在HTML中显示Base64图像

推荐文章

最新文章

标签