我在内联显示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映像(几乎)是不可能的,所以有一个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行。 希望这对你有所帮助!

其他回答

这很简单。

手动编程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行。 希望这对你有所帮助!

通过将元素的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语句中,比如:

src = 'url(imageData)';

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

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

$imageData = base64_encode($imageContent);

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

这是个老问题,但我发现了一些东西。

如果使用Pillow(PIL)加载图像并使用Base64 .b64encode(img.tobytes()),则Base64代码无效。

要让它工作,一旦你的字节加载到一个Image类,创建一个BytesIO对象,然后使用它来保存图像的BytesIO格式,即img。保存(bt_ob、格式=“png”)。

将seak设置为0,然后使用BytesIO对象的输出创建Base64编码的文本

base64.b64encode(bt_ob.read()).decode()

这段代码现在将在html中以"data:image/png;base64,<>"格式工作。

因此,html只会对来自object等文件的编码数据起作用,而Pillow Image对象不会产生这种数据,因此不起作用

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