在图像的 src 标签中使用来自 URL 的 Base64 字符串
Use Base64 String from URL in src tag of image
我有一项服务 returns 图像的 base64 版本。现在我想在 img 的 src 标签中使用 base64 字符串。该服务在 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">
有什么办法可以得到这个运行？
Data URI是一个URI方案，不是图片文件格式。当您使用 src="http://..." 时，方案是 http，而不是 data，浏览器期望响应是图像，这意味着响应正文应该是图像的字节，而不是base64 版本。
因此您可以：
1. 仅 return 来自服务器的图像字节而不是 base64
2. 使用 ajax 从服务器加载 base64 版本，然后用它设置图像的 src 属性。
它不起作用，因为您正在处理具有数据 URL 字符串的页面，就好像只是另一种类型的外部 link-able 图像资产。不幸的是 linking 到外部资产适用于图像文件，但数据 URLs 是作为外部 link 的替代品，因此不能以相同的方式工作。
简而言之，要显示使用数据 URL 字符串的图像，您需要将实际数据 URL 字符串作为 src= 值，例如您的情况:
<img alt="" src="data:image/gif;base64,iVBORw0KGgo ... " style="height:836px; width:592px">
例子
示例 HTML 来自 Masinter，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">
对于 base64 编码的 .png 和 .jpg 图像，要删除单引号，请在编码时使用 utf-8。
示例：
src="data:image/jpeg;base64,iVBORw0KG...."
我有一项服务 returns 图像的 base64 版本。现在我想在 img 的 src 标签中使用 base64 字符串。该服务在 http://localhost:8080/file/301/base64.
base64 字符串如下所示：
data:image/gif;base64,iVBORw0KGgo ...
我在页面上的 img 标记当前如下所示：
<img alt="" src="http://localhost:8080/file/301/base64" style="height:836px; width:592px">
有什么办法可以得到这个运行？
Data URI是一个URI方案，不是图片文件格式。当您使用 src="http://..." 时，方案是 http，而不是 data，浏览器期望响应是图像，这意味着响应正文应该是图像的字节，而不是base64 版本。
因此您可以： 1. 仅 return 来自服务器的图像字节而不是 base64 2. 使用 ajax 从服务器加载 base64 版本，然后用它设置图像的 src 属性。
它不起作用，因为您正在处理具有数据 URL 字符串的页面，就好像只是另一种类型的外部 link-able 图像资产。不幸的是 linking 到外部资产适用于图像文件，但数据 URLs 是作为外部 link 的替代品，因此不能以相同的方式工作。
简而言之，要显示使用数据 URL 字符串的图像，您需要将实际数据 URL 字符串作为 src= 值，例如您的情况:
<img alt="" src="data:image/gif;base64,iVBORw0KGgo ... " style="height:836px; width:592px">
例子
示例 HTML 来自 Masinter，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">
对于 base64 编码的 .png 和 .jpg 图像，要删除单引号，请在编码时使用 utf-8。
示例：
src="data:image/jpeg;base64,iVBORw0KG...."