JSONファイルから画像を表示する際に問題が発生する

Question

私はイオンと角でまだまだ新しく、私はpokedexアプリケーションで作業しています。データサービスの設定後にJSONファイルから取り込んだ画像を表示しようとすると、実際の画像の代わりにファイルパスが表示されます。私は何が間違っているのか分かりません。誰も助けることができますか？ここで

は、JSONファイルからの抜粋です：

{ 
 
    "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' />" 
 
     },

そして、ここではテンプレートです。私がすでに持っているコードのほかに、{{poketMonster.pokemonImage}}の代わりに<img src="pocketMonster.pokemonImage />を試してみたところ、コンソールに404エラーが返ってきました。

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

私は先に行くと、家庭用コンポーネントとそれらが同様に必要とされている場合のデータサービスが含まれます。

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

 
    }); 
 
     } 
 
    
 
    
 
    
 
}

Answer 1

このようにそれを試してみてください。

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

またはalternatively

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

し、データでは、単に資産を既成のタグを入れないでください：

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

これは、あなたのイメージは、その場所にあると想定されます。

また、hereと表示されますが、あなたのケースでは、HTMLスニペットを含めるのは間違いありません。

私の意見では、少なくともほとんどの場合、悪い習慣です。

Answer 2

あなたがこの方法のようにデータを保存する場合：

{ 
     "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' />" 
    }, 

あなたの画像を表示するinnerHTMLのを使用する必要があります。

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

はそれがお役に立てば幸いですが、最初にすべてのあなたが注意を払う必要があります@bgse答え。彼が使用したい@JoeWu