Angular 7 - отображение изображений из байта в базе данных - PullRequest
Новая
       22

Angular 7 - отображение изображений из байта в базе данных

0 голосов
/ 24 марта 2019

Я храню около 400 изображений в базе данных и получаю их в коде 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>

Я попробовал эту ссылку , но она не работает для меня. Я использовал как директиву, так и другой метод. Похоже, мало что изменилось с 2 на 7.

Второй ответ в приведенной выше ссылке без использования директивы дал мне еще одну ошибку. Ошибка в этом

Наконец, потратив более половины дня, я не могу отобразить изображение в пользовательском интерфейсе. Я занимаюсь разработкой с использованием Angular 7. Как лучше всего отображать изображения?

1 Ответ

0 голосов
/ 24 марта 2019

Вам нужно будет 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" >
...