无法显示从 JSON 文件中提取的图像

Question

我对 ionic 和 angular 还是很陌生，我正在开发一个 pokedex 应用程序。当我在设置数据服务后尝试显示从 JSON 文件中提取的图像时，它会显示文件路径而不是实际图像。我不确定我做错了什么。有人可以帮忙吗？

这是来自 JSON 文件的 sn-p：

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

这是模板。除了我已经在这里的代码之外，我还尝试了 <img src="pocketMonster.pokemonImage /> 而不是 {{poketMonster.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>

我将继续添加 home 组件和数据服务，以备不时之需。

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 sn-ps。

在我看来，至少在大多数情况下，这也是一种不好的做法。

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 的回答。