Image src based on parse information


#1

So I’m making parse application. I’m parsing information from https://www.reddit.com/r/artificial/.json. I can show the content in app. Only thing that is bothering me is that some posts don’t have image and then I get border with no image in it. So what I’m trying to do is to load some other image as a “default one” (from internet perhaps) when there is no image near reddit post. I tried something with *nfIf and ng-switch but nothing worked. Here is the code:

HTML:

<ion-header>
  <ion-navbar>
    <ion-title>Reddit news</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-label fixed>Category</ion-label>
        <ion-select (ionChange)="changeCategory()" [(ngModel)]="category" name="category">
          <ion-option value="artificial">Artificial inteligence</ion-option>
          <ion-option value="TechNewsToday">Techonology</ion-option>
          <ion-option value="gamernews">Gaming</ion-option>
        </ion-select>
    </ion-item>
  </ion-list>

  <ion-list>
    <ion-item *ngFor = "let item of items" text-wrap>
      <ion-thumbnail *ngIf="item.data.thumbnail" item-left>
        <img  ng-switch-default src="{{item.data.thumbnail}}">
      </ion-thumbnail>
      <h2 class="wrap item-text-wrap">{{item.data.title}} </h2>
      <p class="wrap item-text-wrap" style="word-wrap: break-word; word-break: break-all;">
        <ion-icon name="person" item-left>{{item.data.author}}</ion-icon>
        <ion-icon name="thumbs-up">{{item.data.score}}</ion-icon>&nbsp;&nbsp;
        <ion-icon name="chatboxes">{{item.data.num_comments}}</ion-icon>       
      </p>
      <a ion-button block target="_blank" href="http://reddit.com/{{item.data.permalink}}">VIEW ON REDDIT</a>
    </ion-item>
  </ion-list>

</ion-content>

TypeScript:

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import {MyRedditApi} from '../../providers/my-reddit-api';

/*
  Generated class for the Reddits page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  selector: 'page-reddit',
  templateUrl: 'reddit.html',
  providers: [MyRedditApi]
})

export class RedditPage {
	items: any;
  category:any;
  limit:any;

  constructor(public navCtrl: NavController, public navParams: NavParams, private redditProvider: MyRedditApi) {}

  ionViewDidLoad() {
    this.getDefaults();
    this.getPosts(this.category, this.limit);
  }

  getDefaults(){
    this.category = 'artificial';
    this.limit = 30;
  }

  getPosts(category, limit){
  	this.redditProvider.getPosts(category, limit).subscribe(response => {
  		this.items = response.data.children;
      
  	}); 
  }

  changeCategory(){
    this.limit = 30;
    this.getPosts(this.category, this.limit);
  }

}

And API

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

/*
  Generated class for the MyReddit provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class MyRedditApi {
	http: any;
	baseUrl: String;

  constructor(http: Http) {
  	this.http = http;
  	this.baseUrl = "https://www.reddit.com/r";
    //console.log('Hello MyReddit Provider');
  }

  getPosts(category, limit){
    console.log (this.baseUrl + '/' + category + '/.json?limit='+limit);
  	return this.http.get(this.baseUrl + '/' + category + '/.json?limit='+limit)
  	.map(res => res.json()); 
  }

}


#2

I would try something like this:

<img [src]="item.data.thumbnail ? item.data.thumbnail : fallbackImage">

…and define fallbackImage as a URL property in the controller.


#3

// try this below code…

   <ion-thumbnail item-left><img src="http://www.banamalon.net/wiki/images/b/b9/Icon_my_photo_frame_wp8.png">
</ion-thumbnail>

//

     <ion-thumbnail  item-left> <img   [src]="{{item.data.thumbnail}}">
  </ion-thumbnail>