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

我有一个返回base64版本图像的服务。现在我想在

img

的

src

标记中使用base64字符串。该服务在

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

base64字符串如下所示：

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

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

页面上我的

img

标记当前看起来如下所示：

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

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

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

是一种URI方案，而不是图像文件格式。当您使用

src=”时http://...“

，方案是

http

，而不是

data

，浏览器希望响应是图像，这意味着响应正文应该是图像的字节，而不是base64版本

因此，您可以： 1.只需从服务器返回映像的字节，而不是base64

---

2.使用ajax从服务器加载base64版本，然后使用它设置图像的src属性。

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

简而言之，要使用数据URL字符串显示图像，需要将实际的数据URL字符串作为

src=

值，例如：

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

例子 来自Masinter的HTML示例，1998年：

---

对于base64编码的

.png

和

.jpg

图像，要删除单引号，请在编码时使用

utf-8

示例：

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