Как загрузить изображения Blob в angular из таблицы phpmyadmin

Question

Я создал функцию и установил метод get для получения всех данных из моей таблицы.
Однако я не могу отображать изображения в браузере. Я перепробовал все «решения», но, похоже, ничего не работает.

Это то, что у меня сейчас есть

<tbody>
  <tr *ngFor="let obj of dataArr">
    <td>{{obj.name}}</td>
    <td>{{obj.price}}</td>
    <td>
      <img  src="data:image/png;base64,{{obj.img}}"/>
    </td>
  </tr>
</tbody>

Имя и цена отображаются нормально.

Это данные, которые я получаю, когда у меня консольный журнал: 0: {id: 2, имя: "nesto", цена: "6", img: "ÿØÿàJFIFÿáExifII * ÿá…" QD ¢% (DJ "QD ¢% (DJ" QD ¢% (DJ "QD ¢ / YU"}

Answer 1

Вероятно, вы ищете это:

<img src="data:image/png;base64,{{
    btoa(obj.img) /* or window.btoa(obj.img) try both */
}}"/>

---

Я советую вам создать маршрут, который извлекает файл из базы данных:

// routes.php

Route::get('files/{record_id}', function($record_id){
    $Model = \EloquentModel::firstOrFail($record_id, ['img']);

    return response($Model->img)->header('Content-Type', 'image/png');
});

// angular file
<img src="/files/{{ obj.id }}">