Trouble with displaying images pulled in from JSON file

Question

I'm still pretty new to ionic and angular, and I'm working on a pokedex app. When I try to display images that I pulled in from a JSON file after setting up the data service, it displays the file path instead of the actual image. I'm not sure what I'm doing wrong. Can anyone help?

Here is a snippet from the JSON file:

{
    "pocketMonsters": [

        {
            "pokemonName": "Bulbasaur",
            "pokedexNumber": "001",
            "description": "Bulbasaur can be seen napping in bright sunlight. There is a seed on its back. By soaking up the sun's rays, the seed grows progressively larger",
            "pokemonImage": "<img src='assets/imgs/bulbasaur.png' />"
        },

        {
            "pokemonName" : "Ivysaur",
            "pokedexNumber" : "002",
            "description" : "",
            "pokemonImage" : "<img src='assets/imgs/ivysaur.png' />"
        },

And here's the template. Besides the code that I already have in here, I have also tried <img src="pocketMonster.pokemonImage /> instead of {{poketMonster.pokemonImage}} and that returned a 404 error in the console.

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

I'll go ahead and include the home component and the data service in case those are needed as well.

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(public navCtrl: NavController, public dataService: pokemonDataService) {

   
  }

  ionViewDidLoad() {
    
           
    
           this.dataService.getAllPokemon().then((data) => {
    
               data.map((pocketMonster) => {

                   this.pocketMonsters = data;
                   return pocketMonster;
                   
    
               });    
    
               console.log(this.pocketMonsters);
           });
           
       }

  //ngOnInit(){
    //this.dataService.getAllPokemon()
      //.subscribe(data => {
        //this.pokemonList = data;
    //});
  //}

  

}

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

    });
      }
 
    
 
}

@JoeWu He'd use ``, but he really shouldn't. – bgse Nov 13 '17 at 21:21 — bgse, Nov 13 '17 at 21:21

bgse · Accepted Answer · 2017-11-13T21:22:57.187

Try it this way:

  <ion-list>
    <ion-item *ngFor="let pocketMonster of pocketMonsters;">
      {{pocketMonster.pokemonName}}
      <img src="{{pocketMonster.pokemonImage}}">
    </ion-item>
   </ion-list>

or alternatively

  <ion-list>
    <ion-item *ngFor="let pocketMonster of pocketMonsters;">
      {{pocketMonster.pokemonName}}
      <img [src]="pocketMonster.pokemonImage">
    </ion-item>
   </ion-list>

and in your data, do not put a premade tag, just the asset:

    {
        "pokemonName" : "Ivysaur",
        "pokedexNumber" : "002",
        "description" : "",
        "pokemonImage" : "assets/imgs/ivysaur.png"
    },

This is assuming your image is in that location.

Also look here, but in your case there is no good reason to include HTML snippets.

It is bad practice too, in my opinion, at least in most™ cases.

I took the premade tag out of my data and made it just the assest. The first method of didn't work for me. It gave a 404 error in the console. But the second method with [src] did. I'm not sure why the first method didn't work, but thank you so much for your help! — Devin, Nov 13 '17 at 23:18

Dmitry Grinko · Answer 2 · 2017-11-13T21:30:06.503

1

If you store data like this way:

    {
        "pokemonName": "Bulbasaur",
        "pokedexNumber": "001",
        "description": "Bulbasaur can be seen napping in bright sunlight. There is a seed on its back. By soaking up the sun's rays, the seed grows progressively larger",
        "pokemonImage": "<img src='assets/imgs/bulbasaur.png' />"
    },

You should use innerHtml to display your image:

<span innerHTML="{{pocketMonster.pokemonImage}}"></span>

Hope it helps, but first of all you should pay attention on @bgse answer.

edited Nov 13 '17 at 21:30

answered Nov 13 '17 at 21:24

Dmitry Grinko

13,806
14
62
86

I tried this, but it didn't work, and I'm not sure why. But I did what @bgse suggested and took the premade tag out of the data and made it just "assets/imgs/bulbasaur.png" and then used the second method that he suggested and that worked. – Devin Nov 13 '17 at 23:26

Trouble with displaying images pulled in from JSON file

2 Answers2