在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中顯示數據庫圖像

回答

相關問題