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

score 2 · Accepted Answer · answered Jul 04 '17 at 00:56

2

You return the picture as base64, so you should be able to display it like that:

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

answered Jul 04 '17 at 00:56

Andreas Gassmann

6,334
7
32
45

Thanks for the answer, but do you know why my previous data all went missing? – aaa Jul 04 '17 at 07:34
It looks like you echo 2 different objects. Can you try to merge them together and then print it? – Andreas Gassmann Jul 04 '17 at 08:09
Thanks for the suggestion, will try definitely try it. – aaa Jul 04 '17 at 08:33
Hi, it seems like your method does not work. `` It returns cannot read property of undefined type error. However when I try ``it returns GET unsafe:data:image/jpeg;base64, net::ERR_UNKNOWN_URL_SCHEME – aaa Jul 04 '17 at 17:32
Did you add CSP to your index.html? https://stackoverflow.com/questions/18447970/content-security-policy-data-not-working-for-base64-images-in-chrome-28 – Andreas Gassmann Jul 04 '17 at 17:43
Thanks for the link, its really helpful. I took some time to understand the concept. So I included the `` with `img-src 'self' data:;`. (Allows loading resources via the data scheme (eg Base64 encoded images).). However console still refuse to load the image because it violates the "img-src 'self' data:". – aaa Jul 04 '17 at 18:16
Does it work now? Are you sure your CSP tag is correct? Otherwise you could try this: https://stackoverflow.com/questions/38080654/ionic-2-angular-2-images-prepended-with-unsafe-therefore-not-displaying-ev – Andreas Gassmann Jul 04 '17 at 20:57

how to get image from MySQL and display using angular 2

1 Answers1