how to get image from MySQL and display using angular 2

Question

I am trying to build an ionic 2 mobile application. Right now, I had no clues on how to display the blob type image from MySQL using angular 2 method.

Moreover, previously before I trying to get the images (getting normal string data), the code works fine. After I add the sql statement store.storePhoto , I am unable to get my other data.

I add the images for the output of the PHP File before and after I add the store.storePhoto .

php

<?php
header('Access-Control-Allow-Origin: *');

// Define database connection parameters
$hn      = 'localhost';
$un      = 'root';
$pwd     = '';
$db      = 'storeListing';
$cs      = 'utf8';

// Set up the PDO parameters
$dsn  = "mysql:host=" . $hn . ";port=3306;dbname=" . $db . ";charset=" . $cs;
$opt  = array(
                    PDO::ATTR_ERRMODE            => 
PDO::ERRMODE_EXCEPTION,
                    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_OBJ,
                    PDO::ATTR_EMULATE_PREPARES   => false,
                   );
// Create a PDO instance (connect to the database)
$pdo  = new PDO($dsn, $un, $pwd, $opt);
$data = array();


// Attempt to query database table and retrieve data
try {
  $listing    = $pdo->query('SELECT 
                             joblistings.ListingTitle, 
                             joblistings.ListingDescription,
                             store.storeAddress,
                             store.storeName,
                             store.storePhoto
                             FROM store INNER JOIN joblistings 
                             ON store.storeID=joblistings.storeID
                             ');

  while($listing_row  = $listing->fetch(PDO::FETCH_OBJ))
  {
     // Assign each row of data to associative array
     $listing_data[] = $listing_row;
     $newArrData = [];

     foreach ($listing_data as $key =>$value){
         $newArrData["storePhoto"] = base64_encode($value->storePhoto);
     }
  }

  $array = array($newArrData);
  echo json_encode($array); 
  echo json_encode($listing_data);
}
catch(PDOException $e)
{
  echo $e->getMessage();
}


?>

TypeScript for getting the data

load()
  {
   this.http.get('http://localhost/php-mysql/retrieve-data.php')
  .map(res => res.json())
  .subscribe(data =>
  {
     this.listings = data;
  });
  }

HTML for display

<ion-row center>
  <ion-col col-12 text-center>
  <h4>
    <ion-input formControlName="ListingTitle" [(ngModel)]="ListingTitle" readonly="true"></ion-input>
  </h4>
  </ion-col>
 </ion-row>

 <ion-row>
 <ion-card>
  <img src="xxx">// Not sure how to get the image
 </ion-card>

 <ion-row>
  <ion-col col-12>
   <h6>Job Description</h6>
   <ion-input formControlName="ListingDescription" [(ngModel)]="ListingDescription" readonly="true"></ion-input>
   </ion-col>
 </ion-row>


 <div text-center>
 <button fab-center ion-button color="primary">
  Submit
 </button>
</div>

After add in storePhoto

Before add in storePhoto

Answer 1

您将图片返回为base64，因此应该能够像这样显示它：

<img src="data:image/jpeg;base64,{{listings.storePhoto}}"/>