在HTML Angular中显示JSON中的图像

Question

很抱歉收到noob问题。我创建了一个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 }}"/>创建一个图像

然而，唯一出现的是一个损坏的图像图标，此错误显示为：得到http://localhost:4200/%7B%20pokemon.image%20%7D404(未找到(

但是当我console.log pokemon.image时，完整的URL会输出到控制台：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)