Question

我有一个返回图像的base64版本的服务。现在我想在src的{{1}}标记中使用base64字符串。该服务在img下提供base64版本。

base64字符串如下所示：

http://localhost:8080/file/301/base64

页面上的data:image/gif;base64,iVBORw0KGgo ...标记目前如下所示：

img

有没有办法让这个运行？

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 - The "data" URL scheme：

＆＃13;

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

＆＃13;

Answer 2

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

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

Answer 3

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

示例：

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

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

3 个答案:

实施例