在图像的 src 标签中使用来自 URL 的 Base64 字符串

Question

我有一个返回图像的 base64 版本的服务。现在我想在 src 标签中使用 base64 字符串 img 。该服务在 http://localhost:8080/file/301/base64 下提供 base64 版本。

base64 字符串如下所示：

 data:image/gif;base64,iVBORw0KGgo ...

我的 img 页面上的标签当前如下所示：

 <img alt="" src="http://localhost:8080/file/301/base64" style="height:836px; width:592px">

有什么办法让它运行吗？

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

Answer 1

它不起作用，因为您正在处理具有数据 URL 字符串的页面，就好像只是另一种类型的外部可链接图像资产一样。不幸的是，链接到外部资产适用于图像文件，但数据 URL 是作为外部链接的替代品，因此不能以相同的方式工作。

简而言之，要使用数据 URL 字符串显示图像，您需要将实际数据 URL 字符串作为 src= 值，例如：

 <img alt="" src="data:image/gif;base64,iVBORw0KGgo ...  " style="height:836px; width:592px">

例子

Masinter 的示例 HTML，1998 RFC 2397 - “数据”URL 方案：

 <IMG SRC="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAw AAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFz ByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSp a/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJl ZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uis F81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PH hhx4dbgYKAAA7" ALT="Larry">

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

Answer 2

Data URI 是一种 URI 方案，而不是图像文件格式。当你使用 src="http://..." 时，方案是 http ，而不是 data ，浏览器应该是响应的字节是响应的图像，而不是 base64 版本。

所以你可以： 1. 只从服务器而不是 base64 返回图像的字节 2. 使用 ajax 从服务器加载 base64 版本，然后用它设置图像的 src 属性。

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