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
- Create a page called display
- Update our app.module.ts file to reflect newly added page
- Create a button on home.html to navigate to display page
- Write a method in display.ts to fetch data from our server
- Update the display.html file to display images fetched
- Create fetch_image.php file to fetch image from server
- Test our app
Now that we have identified all we need to do, let’s get started
Ready…….GO
- 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
[cc]
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;
});
});
}
}
[/cc]
6. Update the display.html file to display images fetched
Open display.ts, update the content between <ion-content> </ion-contant> tags as follows
[cc]
[/cc]
7. Create fetch_image.php file to image from server
Open your favorite text editor, add the following code
[cc]
$row[0],
“picture”=>$row[1] ));
}
echo json_encode(array(“server_response”=> $response));
mysqli_close($con)
?>
[/cc]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
Golden
5 Jan 2019Hello the images always show blank
Laide Lawal
7 Jan 2019@Golden, Do a console log of the response you get from the server to confirm your image location is correct, that is
console.log(res); after loader.dismiss() in your home.ts file.
correct the part as appropriate.
Good luck!