i have to retrieve my images which are stored into a databse as URL path into an ionic list . I have tried the php web service below but the images deosn’t appear .the problem is for the php code or not ?
<?php
header('Access-Control-Allow-Origin: *');
require_once("db_connect.php");
$id = $_GET['id'];
$sql = "SELECT image FROM items WHERE id=$id";
$result = mysqli_query($con,$sql);
$row = mysqli_fetch_assoc($result);
<img src="echo $row['image'];">
?>
Has the url of the images in the database
yes , images are actually stored as url in the database table
make
console.log(response)
To see if the url comes up in app
You php code has no “echo” or anything to output the stuff you got out of the database.
Is image a URL of the image or binary of the image itself?
I changed your post to format your code or error message correctly. Please use the </> button above the post input field to format your code or error message or wrap it in ``` (“code fences”) manually. This will make sure your text is readable and if it recognizes the programming language it also automatically adds code syntax highlighting. Thanks.
I don’t think this file will work. What happens when you open it’s URL in the browser?
Also: Having the image embedded in a website won’t help you load it in your app. How do you want to do that?
i test the file below , it works well , i display then into a json object , how to display images into ionic list (v2) .Below , is the json object :
{“ListeImages”:[{“id”:“29”,“pic”:“uploads/1494099165612.jpg”},{“id”:“30”,“pic”:“uploads/1494100884594.jpg”},{“id”:“31”,“pic”:“uploads/1494108581890.jpg”},{“id”:“32”,“pic”:“uploads/1494108737958.jpg”}],“success”:1}
You need to make your server serve these images in response to some HTTP request, like https://your.server/img/xxx.jpg and have the database send these URLs (or fragments of them) in the JSON. You can’t just give paths to files on a server to a client and expect them to magically appear through a wormhole.
the code below displays images into a table , when running the php file through its url , how could i make the database send these URLs (or fragments of them) in the JSON.?
<?php
header("Access-Control-Allow-Origin: *");
require_once("db_connect.php");
?>
<?php
$result = mysqli_query($con,"SELECT * FROM items") or die(mysqli_error());
?>
<table border="1" cellpadding="5" cellspacing="5">
<tr> <th>Image</th></tr>
<?php
while($row = mysqli_fetch_array($result)) {
$id = $row['id'];
?>
<tr>
<td><img src="<?php echo $row['pic'];?>" alt=" " height="100" width="100"></td>
</tr>
<?php
}
?>
</table>
Sounds right but instead of doing it in server side do it in client, avoid the php script
do it in angular
This code works because the file you’ve written this code in resides on the server side and has access to the uploads images folder relative to its own path on the server. From outside the server (which your ionic app is I presume), you need to provide the app the full public url of the image and not just a relative path.
If your uploads folder is public, then what you can try is finding the full url to the images, for example, it might be "http://www.yoursite.com/uploads/1494099165612.jpg" for this particular image. Once you find the public url, just prepend whatever the "http://www.yoursite.com/" part is to what you are getting from the json as the image src so that you are giving the full public url to your Ionic app.
Or, you can send the full public url in the json in the first place and use that in your app.
I have resolve access to the image , i have convert it to a json object as shown below , in order to display the image into a ion-list i try that code :
<ion-list>
<ion-item *ngFor="let post of posts">
<img [src]="post.pic"/>
</ion-item>
</ion-list>
json object :
{"ListeImages":[{"id":"44","pic":"https:\/\/stationpfe.000webhostapp.com\/projet\/uploads\/1494201248244.jpg"}],"success":1}
i can’t get the image
Works fine for me. I see wavy lines and a plaid arm.
posts: = [{
"id": "44",
"pic": "https:\/\/stationpfe.000webhostapp.com\/projet\/uploads\/1494201248244.jpg"
}];
<ion-list>
<ion-item *ngFor="let post of posts">
<img [src]="post.pic">
</ion-item>
</ion-list>
About.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {Imageservice} from '../../providers/imageservice';
import { Http } from '@angular/http';
@Component({
selector: 'page-about',
templateUrl: 'about.html',
providers:[Imageservice]
})
export class AboutPage {
posts: any;
constructor(public navCtrl: NavController,public im:Imageservice,public http: Http) {
this.getImages();
}
getImages(){
this.im.OneArrive().subscribe(response=>
{
this.posts=response.ListeImages;
});
}
}
about.html
<ion-header>
<ion-navbar>
<ion-title>
About
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item *ngFor="let post of posts">
<img [src]="post.pic"/>
</ion-item>
</ion-list>
</ion-content>
imageservice.ts ( a provider)
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class Imageservice {
constructor(public http: Http) {
console.log('Hello Imageservice Provider');
}
public OneArrive(){
var url='https://stationpfe.000webhostapp.com/projet/SelectListeImages.php';
return this.http.get(url).map(res=>res.json());
}
}
https://stationpfe.000webhostapp.com/projet/SelectListeImages.php’ returns the json object .
Actually i’m getting that error :
Some dos and don’ts:
Imageservice in the page’s providers array.posts as any.posts a proper type.public unless they are directly accessed from the template (which should be pretty rare).posts to an empty array initially.Finally, and most importantly here,
HttpModule in your app module.Thanks a lot 