Angular 7 - 从数据库中的字节显示图像答案

【问题标题】：Angular 7 - Display Images from byte in DatabaseAngular 7 - 从数据库中的字节显示图像
【发布时间】：2019-08-14 15:41:20
【问题描述】：

我将大约 400 张图像全部存储在数据库中，并在 byte[] 中以 C# 代码获取这些图像。

我的要求很简单。我有包含名称、代码和字节 [] 的设计类。我正在使用 ngFor 绑定这个类

<div *ngFor="let design of designs" >
<img height="200" width="200"  src="{{design.data}}" />

<div>
  <h2>{{ design.name }}</h2>
  <h4>{{ design.code }}</h4>
</div>

我试过this link，但它不适合我。我使用了指令和其他方法。看起来从 2 到 7 几乎没有什么变化。

上面链接中没有使用指令的第二个答案给了我另一个错误。 Error is this

最后，花了半天多后，我无法在 UI 中显示图像。我正在使用 Angular 7 进行开发。显示图像的最佳方式是什么？

【问题讨论】：

链接的第二个答案应该有效。如果您的 json 收到意外令牌，您应该检查您的 json 是否有效（您可以在此处执行此操作：jsonlint.com）如果它无效，为什么？一般来说，我认为对图像使用 base64 是一个坏主意，最好的方法是提供一个 api 端点，浏览器可以在其中将该图像下载为二进制文件，这样您就可以使用指向 img src 中图像的链接。不过实现起来会更复杂
您不了解 HTML 和 HTTP 的工作原理。图像的src 属性不包含图像的字节。它包含图像的 URL。当浏览器在 HTML 中找到 <img src="/foo/bar"> 时，它会向 /foo/bar 发送一个额外的 GET 请求，然后服务器应该发送一个响应，其中包含图像的字节作为正文，以及图像的内容类型在标题中。
@x4rf41 我想在不使用base64的情况下实现，即使它很复杂，你能指导我如何更好地实现吗？
@x4rf41 将数据从字节转换为base64后的返回字符串非常大，jsonlint.com说它无效。

标签： angular image

【解决方案1】：

您需要对从数据库接收到的图像字节进行 base64 编码，然后使用 base64 字节显示图像。

因此，您可以按照以下方式进行操作：

var base64String = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));

arrayBuffer 是字节缓冲区，一旦你得到你的 base64 字符串，你可以将它设置为一个公共变量。请记住，您需要将标头附加到 base64 字符串。因此，如果您的公共变量名为 image，那么您将必须执行以下操作：

this.image = 'data:image/jpeg;base64,' + base64String

完成后，您可以使用以下标签显示 iamge：

<img id="image" [src]="image" >

【讨论】：

这是否也适用于audio 和video 元素，还是仅适用于img？