Q:

Ionic image src based on parse information

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 instead of "empty 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';

@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);
}

}

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

@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()); 
  }

}

A:

you can try returning the image url from a function in the controller by checking the thumbnail value instead of directly binding the thumbnail value as below.
<ion-thumbnail item-left>
 <img [src]="getThumbnailImage(item.data.title)">
</ion-thumbnail>

