Images not appear after retrieving images from firebase


#1

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 :slight_smile:

<!--
  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>

#2

Are you trying to use AF to read from Storage? That isn’t supported yet. You can only use AF to read from the realtime database. Your this.ads needs to be equal to a firebase.database.Reference, or a firebase.database.Query. Use the Firebase SDK to read from Storage. I suppose you could translate images to JSON objects and store them in the database, but I don’t know how perfomant that would be.


#3

<img [src]=“ad.img” />

its read from realtime database with angularfire and its read the image link :
“gs://myolxapp-21400.appspot.com/ads/lava-iris-x5-dual-sim-android-mobile-phone-large_4e574328198102ed9804b0fd99c2d60b.jpg”

i think it can be read easlily ?


#4

I’m pretty sure the realtime database links are firebaseio.com, while the Storage links are appspot.com.


#5

i save the image link in reatime database , so i read it from database ,
but you can tell me how to retrive images from firebase storage ? thank ,you


#6

Just follow any of the blog or video tutorials for using Firebase 3 storage. Pretend AngularFire doesn’t exist.

Edit: Also, you don’t need to save the image link twice. If you know the directory location of the image, you can get a download url through the Firebase SDK. You would only need to save download URLs in the realtime database if you had lots of pieces that made up a larger media element, like a video stream.

Second edit: I just checked a project, and the image link you posted looks like a storage location link, not a download url. To set img.src = something, you need the download url, which you can get manually through your console, or programmatically through the Firebase SDK.