问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何在 HTML 中显示 Base64 图像

社区维基
1
新手上路，请多包涵

我在显示内联 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>

原文由 Christopher 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译html图片base64inline
阅读 700
2 个回答
得票最新
社区维基
1
✓ 已被采纳

我的怀疑当然是实际的 Base64 数据。否则它对我来说很好看。请参阅 此小提琴，其中有类似的方案正在运行。您可以尝试指定字符集。

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

您可以试试 这个 Base64 解码器，看看您的 Base64 数据是否正确。

原文由 VinayC 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

您需要指定正确的 Content-type 、 Content-encoding 和 charset 。

喜欢

 data:image/jpeg;charset=utf-8;base64,

根据 数据 URI 方案 的语法：

  data:[<media type>][;charset=<character set>][;base64],<data>

原文由 Hemant Metalia 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题