在 HTML Angular 中显示来自 JSON 的图像

Question

sorry for the noob question. I created an http request and retrieved some pokemon data and put it in an object called pokemon, like so:

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']
      }

In the HTML, I tried to create an image with <img src = "{{ pokemon.image }}"/>

However, the only thing that appears is a broken image icon and this error apears: GET http://localhost:4200/%7B%20pokemon.image%20%7D 404 (Not Found)

But when I console.log pokemon.image, the full URL is output to the console: https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png

What am I doing wrong here?

Answer 1

You can try it with this instead:

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

If this still not works, can you tell me what is the reflected value of that property in your HTML file?

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

Answer 2

I made two changes and its working:

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

2) this.pokemon (instead of  const pokemon)