如何在 HTML 中显示 Base64 图像 [英] How to display Base64 images in HTML

查看:42
本文介绍了如何在 HTML 中显示 Base64 图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我无法在线显示 Base64 图像.

我该怎么做?

<头><title>显示图片</title><身体><img style='display:block;宽度:100 像素;高度:100 像素;'id='base64image'src='data:image/jpeg;base64, LzlqLzRBQ... <!-- Base64 数据-->'/></html>

解决方案

我怀疑的当然是实际的 Base64 数据.否则对我来说看起来不错.请参阅this fiddle,其中类似的方案正在发挥作用.您可以尝试指定字符集.

<p>取自维基百科</p><img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="红点"/>

你可以试试这个Base64解码器看看你的Base64数据是否正确或者不是.

I'm having trouble displaying a Base64 image inline.

How can I do it?

<!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>

解决方案

My suspect is of course the actual Base64 data. Otherwise it looks good to me. See this fiddle where a similar scheme is working. You may try specifying the character set.

<div>
  <p>Taken from wikpedia</p>
  <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
    AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
        9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>

You can try this Base64 decoder to see if your Base64 data is correct or not.

这篇关于如何在 HTML 中显示 Base64 图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆