Question

我大约有400张图像全部存储在数据库中，并用C＃代码将这些图像保存在byte []中。

我的要求很简单。我有包含名称，代码和byte []的Design类。我正在使用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开发。显示图像的最佳方法是什么？

Answer 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" >

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

1 个答案: