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

Posted 2023-03-05

【中文标题】在图像的 src 标记中使用来自 URL 的 Base64 字符串

【英文标题】：Use Base64 String from URL in src tag of image

【发布时间】：2016-06-20 02:55:18

【问题描述】：

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

base64 字符串如下所示：

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

我在页面上的img 标签目前看起来像这样：

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

有什么方法可以让它运行吗？

【问题讨论】：

我必须对此发表评论。 MIME 类型是“image/gif”，但字符串“iVBORw0KGgo”是 PNG 签名？？？？像这样的小事让我发笑。

【参考方案1】：

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

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

【参考方案2】：

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

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

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

示例

来自 Masinter 的 html 示例，1998 RFC 2397 - The "data" URL scheme:

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

【参考方案3】：

对于 base64 编码的 .png 和 .jpg 图像，要删除单引号，请在编码时使用 utf-8。

示例：

src="data:image/jpeg;base64,iVBORw0KG...."