images not appear after retrieving images from firebase :
i set the Firebase Stroage rules to public but , and try to retrive the images by two ways :
the way 2 :
<img [src]=“item.img” />
but it doesn`t work
and this the Browser output :
un safe link ?! i don`t now where the issue
the code here too :
import { Component } from '@angular/core';
import { NavController,NavParams } from 'ionic-angular';
import {AngularFire,FirebaseListObservable,FirebaseObjectObservable} from 'angularfire2';
/*
Generated class for the Ads page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
@Component({
selector: 'page-ads',
templateUrl: 'ads.html'
})
export class AdsPage {
ads : FirebaseListObservable<any[]>;
catid : any;
catName : any;
color : FirebaseObjectObservable<any>;
constructor(public navCtrl: NavController, public navparams :NavParams,public af:AngularFire) {
this.catid =this.navparams.get('catid');
this.catName =this.navparams.get('catName');
this.ads = this.af.database.list('/cats/'+this.catName+'/'+this.catid+'/ads');
this.color = this.af.database.object('/cats/'+this.catName+'/catInfo');
}
ionViewDidLoad() {
console.log('Hello AdsPage Page');
}
}
Html FIle
<!--
Generated template for the Ads page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar color="{{ (color |async)?.color }}">
<ion-title>{{catid}} </ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-grid>
<ion-row>
<ion-col width>
<ion-card padding *ngFor="let ad of ads |async" >
<img [src]="ad.img" />
<ion-card-content>
<ion-card-title>
{{ad.title}}
</ion-card-title>
<p>
{{ad.content}}
</p>
</ion-card-content>
<!-- ads other info -->
<ion-row>
<ion-col width-50>
<button ion-button icon-left clear small>
<ion-icon name="cash"></ion-icon>
<div>{{ad.price}}ج.م</div>
</button>
</ion-col>
<ion-col width-50>
<button ion-button icon-left clear small>
<ion-icon name="pin"></ion-icon>
<div>{{ad.location}}</div>
</button>
</ion-col>
</ion-row>
<ion-row>
<ion-col width-50>
<button ion-button icon-left clear small>
<ion-icon name="heart"></ion-icon>
<div>المفضلة</div>
</button>
</ion-col>
<ion-col width-50>
<button ion-button icon-left clear small>
<ion-icon name="clock"></ion-icon>
<div>منذ 15 دقيقة</div>
</button>
</ion-col>
</ion-row>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>