在 Javascript 中显示数据库图像答案

【问题标题】：Display Database Image in Javascript在 Javascript 中显示数据库图像
【发布时间】：2016-12-06 17:11:11
【问题描述】：

我正在使用 Ionic 2 调用 Java 中的 RESTful 服务 (JSON) 和 MySQL 数据库。我正在尝试显示存储在数据库中的图像，并将其渲染为 ionic。

一切都很完美，除了我正在努力让图像显示。

我有一个存储在 MySQL 中的 PNG 图像（类型 LONGBLOB）。然后我访问它，并在 Java 中将其转换为 Base64。

import org.apache.commons.codec.binary.Base64;
subCategory.setIcon(Base64.encodeBase64(subCategory.getIcon()));

JSON：

"icon" : "Vm0wd2QyUXlVWGxWV0d4V1YwZDRWMVl3Wk...lpRVVQwOQ=="

然后一旦通过 JSON 接收，我将其显示在 html 中：

<img src="data:image/png;base64,{{item.icon}}" />

它只显示没有图像的图像占位符。

我也试过用这个 Javascript 解码图像：

icon = atob(icon);

和

 b64DecodeUnicode(str) {
    return decodeURIComponent(Array.prototype.map.call(atob(str), function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));
}

没有成功。

【问题讨论】：

<img src="some url here" /> 和设置一个从 MySQL 提供图像数据的 HTTP 服务器有什么问题？另外：Base64 和decodeURIComponent 完全不相关；一个不是另一个的倒数。
嗨，马特，感谢您的建议。然后我可以删除decodeURIComponent。我将它存储在数据库中的原因是我可以通过更新数据库来添加图像。其次，我想保持简单，我不将它们作为 http 服务的原因是因为我有 RESTful JSON 服务，并且正在调用以获取其余数据，我不想再做一个http 调用。
ps，删除decodeURIComponent 没有区别，即图像仍然不显示。
欢迎来到 Stack Overflow！寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：如何创建最小、完整和可验证的示例。
@Richard 请不要只是发布到其他地方的链接。当该链接失效时，您的问题将失去所有上下文。这就是为什么我们希望人们在这里完整地提出问题。 stackoverflow.com/help/mcve

标签： javascript java mysql json

【解决方案1】：

这行得通：

<img src="data:image/png;base64,{{item.icon64}}" />

和

  b64DecodeUnicode(str) {
    return decodeURIComponent(Array.prototype.map.call(atob(str), function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));
}

【讨论】：

奇怪，它起作用了，现在它没有代码更改。使困惑！我已清除浏览器缓存。
我的源代码显示如下：<img ng-reflect-src="data:image/png;base64,Vm0wd2QyUX...M5" src="data:image/png;base64,Vm0wd2QyUX...M5"> 为什么会显示两次src。使用以下 html 代码：<img src="data:image/png;base64,{{item.icon64}}" />