Блог

извините за вопрос новичка. Я создал http-запрос и извлек некоторые данные pokemon и поместил их в объект с именем pokemon, например:

 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/{ pokemon.image } 404 (Не найден)

Но когда я console.log pokemon.image, полный URL выводится на консоль: https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png

Что я здесь делаю не так?

Вы можете попробовать это с помощью этого:

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

Если это все еще не работает, можете ли вы сказать мне, каково отраженное значение этого свойства в вашем HTML-файле?

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

Я внес два изменения, и его работа :

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

2) this.pokemon (instead of  const pokemon)