在 HTML Angular 中顯示來自 JSON 的圖像

Question

抱歉這個菜鳥問題。 我創建了一個 http 請求並檢索了一些 pokemon 數據並將其放入一個名為 pokemon 的 object 中，如下所示：

export class AppComponent implements OnInit{
  title = 'Pokedex';
  apiURL = 'https://pokeapi.co/api/v2/pokemon/1';
  pokemon = {};
  constructor(private http: HttpClient){}

  ngOnInit(): void{
    this.http.get(this.apiURL).subscribe(data =>{
        const pokemon = {
          name: data['name'],
          id: data['id'],
          abilities: data['abilities'].map( ability => ability['ability']['name']),
          types: data['types'].map( type => type['type']['name']),
          image: data['sprites']['front_default']
      }

在 HTML 中，我嘗試用<img src = "{{ pokemon.image }}"/>創建圖像

但是，唯一出現的是損壞的圖像圖標，並且出現此錯誤：GET http://localhost:4200/%7B%20pokemon.image%20%7D 404 (Not Found)

但是當我 console.log pokemon.image 時，完整的 URL 是 output 到控制台： https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png

我在這里做錯了什么？

Answer 1

你可以試試這個：

<img [src]="pokemon.image"/>

如果這仍然不起作用，您能告訴我該屬性在您的 HTML 文件中的反映值是多少嗎？

<p>{{ pokemon.image }}</p>

Answer 2

我做了兩個更改及其工作：

1) pokemon:any;   (instead of  pokemon = {};)

2) this.pokemon (instead of  const pokemon)