在Javascript中显示数据库图像

我正在使用Ionic 2在Java和MySQL数据库中调用RESTful Service（JSON）。我试图显示存储在数据库中的图像，并将其呈现为离子图像。在Javascript中显示数据库图像

一切都很完美，除了我努力获得一个图像显示。

我有一个PNG图像存储在MySQL（类型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('')); 
}

没有成功。

来源

2016-08-01 Richard

出了什么问题''和设置是从MySQL提供的图像数据的HTTP服务器？除此之外：Base64和'decodeURIComponent'完全不相关;一个不是另一个的反面。 –

嗨马特，谢谢你的建议。然后我可以删除'decodeURIComponent'。我将它存储在数据库中的原因是，我可以通过更新数据库来添加图像。其次，我想保持简单，我之所以不把它们作为http服务，是因为我有RESTful JSON服务，并且正在调用其他的数据来获取其他数据，我不想让它成为另一个http呼叫。 – Richard

ps，移除'decodeURIComponent'不会产生差异，即图像仍然不显示。 – Richard

这工作：

<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('')); 
}

来源

2016-08-01 18:08:29 Richard

奇怪的是，它的工作，现在它没有代码的变化。困惑！我清除了浏览器缓存。 – Richard

我的源代码显示如下： '' 为什么它显示'src'两次。使用以下html代码： '' – Richard

在Javascript中显示数据库图像

回答

相关问题