Question

我正在尝试构建一个离子2移动应用程序。现在，我没有关于如何使用angular 2方法从MySQL显示blob类型图像的线索。

此外，在我尝试获取图像（获取正常的字符串数据）之前，代码工作正常。添加sql语句store.storePhoto后，我无法获取其他数据。

我在添加store.storePhoto之前和之后添加了PHP文件输出的图像。

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

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

用于展示的HTML

<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>

在storePhoto中添加后

在storePhoto中添加之前

Answer 1

您将图片作为base64返回，因此您应该能够将其显示为：

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

如何从MySQL获取图像并使用angular 2显示

1 个答案: