Question

我正在使用Ionic 2在Java和MySQL数据库中调用RESTful服务（JSON）。我正在尝试显示存储在数据库中的图像，并以离子形式呈现它。

一切都很完美，除了我努力想要显示图像。

我有一个存储在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(''));
}

没有成功。

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

在Javascript中显示数据库图像

1 个答案: