2017-07-03 73 views
0

我试图建立一个离子2移动应用程序中获取图像。现在,我没有关于如何使用角度2方法显示来自MySQL的blob类型图像的线索。如何从MySQL和显示器采用了棱角分明2

而且,以前在我试图让图像(获得正常的字符串数据),代码工作正常。之后,我加入SQL语句store.storePhoto,我不能让我的其他数据。

我添加图片的PHP文件之前和之后我加入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(); 
} 


?> 

打字稿用于获取数据

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 PHP File after add the storePhoto

之前加入storePhoto PHP File before add the storePhoto

回答

2

你返回图片为base64,所以你应该能够像它显示:

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

感谢您的回答,但您是否知道为什么我以前的数据都丢失了? – aaa

+0

它看起来像你回声2个不同的对象。你可以尝试将它们合并在一起然后打印出来吗? –

+0

感谢您的建议,一定会尝试一下。 – aaa