Javascript AngularJS：从文件加载base64图像

我有一个图像列表，但每个图像都有一个s3文件，其中包含他的base64编码

图像示例：

问题是如果我这样做：

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

这是有效的。。。好吧。。。但我有两个大问题：

• CORS问题，我需要用

  http://cors.io/?${url}

  。对我来说，这不是一个好的解决方案，因为这是一种缓慢加载所有图像的方法，如果有一天

  cors.io

  停止工作，我的网页也不会工作

• 如果以这种方式加载大量图像，则所有base64编码的字符串都在内存中，页面将出现一些内存问题

有没有其他解决方案来实现这一点，以避免这些大问题

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

---

非常感谢。

你可以找到一个例子。此外，在上，您可以找到加载base64映像的方法

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

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

---

您需要构建一个后端功能，以便通过自己的url将这些图像发送到前端应用程序。

是。。。但我的问题是如何在url中加载base64编码的文件…您正在尝试使用“http”检索“数据”方案；您的浏览器希望使用字节，而不是base64数据。您需要构建一个后端功能，以便通过您自己的url将这些图像提供给前端应用程序。

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

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