How to display images from database in ionic 3 app

In this tutorial, we are going to learn how to display images from database in ionic 3 app,  this  tutorial is a continuation of my last tutorial How to upload images from gallery and camera to database in ionic 3 app, in the last tutorial we created a cameraApp which capture image from both camera and gallery and upload it to our online serve. In this tutorial we are going take a step further by displaying all the images we uploaded into another page.

As usual, we need to identify what we need doing to achieve our task of the day

1. Create a page called display
2. Update our app.module.ts file to reflect newly added page
3. Create a button on home.html to navigate to  display page
4. Write a method in display.ts to fetch data from our server
5. Update the display.html file to display images fetched
6. Create fetch_image.php file to fetch image from server
7. Test our app

Now that we have identified all we need to do, let’s get started

Ready…….GO

1. Create a page called display 

Open your CLI, change directory to our last app directory i.e. cameraApp and issue the following command as show below

C:\ionicdon\cameraApp>ionic g page display

For more information on how to create a page in ionic app click here

 

2.   Update our app.module.ts file to reflect newly added page

Open app.module.ts, import DisplayPageModule form its location and add DisplayPageModule to import section  as shown below

3.    Create a button on home.html to initiate display of image

Open home.html add a button named display pictures just above the </ion-grid> closing tag using the following code

<button ion-button full (click)= “displayPicture()”> Display Picture </button>

 

4    Write a method in home.ts to navigate to displayPage

Add the following code to home.ts

  displayPicture(){

    this.navCtrl.push(DisplayPage);

  }

Don’t forget to import DisplayPage from its location to home.ts as thus

import { DisplayPage } from ‘../display/display’;

 

for more information on navigation from one page to another see HERE

5.    Write a method in display.ts to fetch data from our server

Open  display.ts update the content to reflect the following code

ionViewDidLoad() {

var headers = new Headers();

headers.append(“Accept”, ‘application/json’);

headers.append(‘Content-Type’, ‘application/json’ );

let options = new RequestOptions({ headers: headers });

let loader = this.loading.create({

content: ‘Processing please wait…’,

});

loader.present().then(() => {

this.http.post(‘http://ionicdon.com/mobile/fetch_data.php’,data,options)

.map(res => res.json())

.subscribe(res => {

loader.dismiss()

this.items=res.server_response;

});

});

}

}

6.   Update the display.html file to display images fetched

Open display.ts, update the content between <ion-content> </ion-contant> tags as follows

<ion-content padding>

<ion-list>

<ion-item  *ngFor=”let item of items” >

<ion-item >

<img src=”{{item.picture}}”>

</ion-item>

</ion-item>

</ion-content>

 

7.   Create fetch_image.php file to image from server

Open your favorite text editor, add the following code

<?php

if (isset($_SERVER[‘HTTP_ORIGIN’])) {

header(“Access-Control-Allow-Origin: {$_SERVER[‘HTTP_ORIGIN’]}”);

header(‘Access-Control-Allow-Credentials: true’);

header(‘Access-Control-Max-Age: 86400’);    // cache for 1 day

}

// Access-Control headers are received during OPTIONS requests

if ($_SERVER[‘REQUEST_METHOD’] == ‘OPTIONS’) {

if (isset($_SERVER[‘HTTP_ACCESS_CONTROL_REQUEST_METHOD’]))

header(“Access-Control-Allow-Methods: GET, POST, OPTIONS”);

if (isset($_SERVER[‘HTTP_ACCESS_CONTROL_REQUEST_HEADERS’]))

header(“Access-Control-Allow-Headers:        {$_SERVER[‘HTTP_ACCESS_CONTROL_REQUEST_HEADERS’]}”);

exit(0);

}

require “dbconnect.php”;

$sql =”SELECT * from images   ;”;

$result = mysqli_query($con, $sql);

$response = array();

while($row = mysqli_fetch_array($result))

{

array_push($response, array(

“id”=>$row[0],

“picture”=>$row[1] ));

}

echo json_encode(array(“server_response”=> $response));

mysqli_close($con)

?>

And save the file as fetch_data.php

8.     Test our app

All done?  Let’s  test our app

Note that display of images can be done in our browser, hence, you can test your app using

ionic serve –l