AngularJS：從文件加載base64圖像

我有一個圖像列表，但每個圖像都有一個s3文件，其文件內有base64編碼。圖像的AngularJS：從文件加載base64圖像

例子：

https://s3.eu-central-1.amazonaws.com/sensicityissues/1483573056505-61946

的問題是，如果我做了這樣的事情：

<img src="https://s3.eu-central-1.amazonaws.com/sensicityissues/1483573056505-61946" />

圖像不加載。

如果我想，這個工作在這種方式，我需要做這樣的事情：

HTML：

<div ng-init="vm.loadImage(image, image.url)"> 
    <img ng-if="image && image.src" data-ng-src="{{image.src}}" width="60" /> 
</div>

JS：

self.loadImage = (img, url) => { 
    $http.get(`http://cors.io/?${url}`) 
     .then(r => (img.src = r.data)) 
}

這是工作... Okey ...但我有這個2大問題：

CORS問題，我需要用http://cors.io/?${url}來解決。對我來說不是一個好的解決方案，因爲是一個緩慢的方式來加載所有的圖像，如果有一天cors.io停止工作，我的網頁將不會工作...
如果我加載這種方式的一大堆圖像，所有base64編碼的字符串在內存中，頁面將有幾個內存問題。

是否有另一種解決方案來實現這個避免這些大問題？

（我不能改變圖像的方式保存在S3 ...）

太謝謝你了。

來源

2017-01-05 Aral Roca

您可以在此fiddle上找到示例。此外，在this question上，您可以找到加載base64映像的方式。

<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

您不能混合使用非字節響應的http模式作爲src屬性值。

你需要建立一個後端功能，以便通過自己的網址將這些圖像提供給前端應用程序。

來源

2017-01-05 10:18:19

yes ...但是我的問題是關於如何在url中加載base64編碼文件... –

您試圖使用'http'來檢索''data''方案;您的瀏覽器希望使用字節而不是base64數據。您需要構建後端功能，以便通過自己的網址將這些圖像提供給前端應用程序。 –

AngularJS：從文件加載base64圖像

回答

相關問題