Как загрузить изображение из базы данных с помощью PHP и отобразить его на URL, чтобы Angular 7 мог получить изображение с отдыхом и загрузить его

Question

Я хочу загрузить изображение из MySQL базы данных с помощью PHP и отправить его в Angular 7 приложение с помощью GET запроса.

В PHP У меня есть функция read,которая берет информацию из базы данных и отображает ее в формате JSON.Это работает:

if($num>0){

    // products array
    $products_arr=array();
    $products_arr["records"]=array();

    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
        extract($row);

        $product_item=array(
            "id" => $id,
            "name" => $name,
            "description" => html_entity_decode($description),
            "category" => $category,
            "image" => base64_encode($image),
            "price" => $price
        );

        array_push($products_arr["records"], $product_item);
    }

    // set response code - 200 OK
    http_response_code(200);

    // show products data in json format
    echo json_encode($products_arr);

Мой Angular 7 клиент выглядит следующим образом:

admin.component.ts

  ngOnInit() {
    this.medicineInfo = new FormGroup({
      medicineName: new FormControl(null ,Validators.required),
      medicineDesc: new FormControl(null ,Validators.required),
      medicineCategory: new FormControl(null ,Validators.required),
      medicineImage: new FormControl(null ,Validators.required)
    });

    this.postMedicineService.getMedicine().subscribe((response) => {
      this.medicines=response
      console.log(this.medicines[0].name);
    });
  }

Medicine.service.ts

    getMedicine(){
        return this.httpClient.get<Medicine[]>(getUrl).pipe(map(response => {
            this.medicine = response['records'];
            return this.medicine;
        }));
    }

И, наконец, мой admin.component.html

 <div class="medicine-list-container col-md-12">
    <ul class="list-inline">
      <li class="list-inline-item" *ngFor="let medicine of medicines">
        <div class="card" style="max-width: 15rem;">
          <img class="card-img-top" src="{{ medicine.image }}" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">{{ medicine.name }}</h5>
            <p class="cut-text card-text">{{ medicine.description }}.</p>
            <p class="card-text">{{ medicine.price }} DIN</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </li>
    </ul>
  </div>

Все показывает, кроме изображения.Спасибо