Struggling with displaying images in my Ionic and Angular pokedex app. The JSON file data service pulls the image paths, but only displays the file path instead of the actual image. Any ideas on what might be causing this issue?
Sample snippet from the JSON file:
{
"pocketMonsters": [
{
"pokemonName": "Bulbasaur",
"pokedexNumber": "001",
"description": "Bulbasaur can be seen napping in bright sunlight...",
"pokemonImage": "<img src='assets/imgs/bulbasaur.png' />"
},
{
"pokemonName" : "Ivysaur",
"pokedexNumber" : "002",
"description" : "",
"pokemonImage" : "<img src='assets/imgs/ivysaur.png' />"
},Template code that I've tried:
<ion-header>
<ion-navbar>
<ion-title>
Pokedex
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item *ngFor="let pocketMonster of pocketMonsters;">
{{pocketMonster.pokemonName}}
{{pocketMonster.pokemonImage}}
</ion-item>
</ion-list>
<!--<div *ngIf="pocketMonsters.length"></div> -->
</ion-content>Includes the home component and data service:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { pokemonDataService } from '../../providers/data/data';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
pocketMonsters = [];
searchQuery: string = '';
// Constructor and ionViewDidLoad methods...
}import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class pokemonDataService {
data: any;
constructor(public http: Http) {
}
getAllPokemon() {
if (this.data) {
return Promise.resolve(this.data);
}
return new Promise(resolve => {
this.http.get('assets/data/pokemon.json').map(res => res.json()).subscribe(data => {
this.data = data.pocketMonsters;
resolve(this.data);
});
});
}
}