Question

我有一个图片列表，但每个图片都有一个s3文件，其中 base64 encoded 在此文件中。

图片示例：

的 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))
}

这很有效......哦......但我有两大问题：

我需要使用http://cors.io/?${url}解决的CORS问题。对我来说这不是一个好的解决方案，因为加载所有图片的方式很慢，如果有一天cors.io停止工作，我的网页也无法正常工作......
如果我用这种方式加载大量图像，所有base64编码的字符串都在内存中，页面会有几个内存问题。

是否有其他解决方案可以避免这些大问题？

（我无法改变图像在s3中的保存方式......）

非常感谢你。

Answer 1

您可以在此fiddle上找到示例。此外，在this question上，您可以找到加载base64图像的方法。

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

您不能将提供非字节响应的http模式混合为src属性值。

您需要构建一个后端功能，以便通过您自己的网址将这些图像提供给您的前端应用。

AngularJS：从文件加载base64图像

1 个答案: