Angular 显示从JSON文件拉入的图像时出现问题

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

以下是JSON文件的一个片段：

{
“口袋怪物”：[
{
“口袋妖怪”：“Bulbasaur”，
“pokedexNumber”：“001”，
“描述”：“在明亮的阳光下可以看到蓝鲸在打盹。它的背上有一颗种子。通过吸收阳光，种子逐渐变大”，
“口袋妖怪”：
},
{
“口袋妖怪”：“艾维索”，
“pokedexNumber”：“002”，
“说明”：“，
“口袋妖怪”：
}，

请尝试以下方法：

  <ion-list>
    <ion-item *ngFor="let pocketMonster of pocketMonsters;">
      {{pocketMonster.pokemonName}}
      <img src="{{pocketMonster.pokemonImage}}">
    </ion-item>
   </ion-list>

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

这是假设您的图像位于该位置

同样要注意，但是在您的例子中，没有很好的理由包含HTML片段

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

请尝试以下方法：

  <ion-list>
    <ion-item *ngFor="let pocketMonster of pocketMonsters;">
      {{pocketMonster.pokemonName}}
      <img src="{{pocketMonster.pokemonImage}}">
    </ion-item>
   </ion-list>

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

这是假设您的图像位于该位置

同样要注意，但是在您的例子中，没有很好的理由包含HTML片段

---

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

如果以这种方式存储数据：

  <ion-list>
    <ion-item *ngFor="let pocketMonster of pocketMonsters;">
      {{pocketMonster.pokemonName}}
      <img src="{{pocketMonster.pokemonImage}}">
    </ion-item>
   </ion-list>

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

{
“口袋妖怪”：“Bulbasaur”，
“pokedexNumber”：“001”，
“描述”：“在明亮的阳光下可以看到蓝鲸在打盹。它的背上有一颗种子。通过吸收阳光，种子逐渐变大”，
“口袋妖怪”：
},

您应该使用innerHtml来显示图像：

<span innerHTML="{{pocketMonster.pokemonImage}}"></span>

---

希望有帮助，但首先您应该注意@bgse answer。

如果您以这种方式存储数据：

  <ion-list>
    <ion-item *ngFor="let pocketMonster of pocketMonsters;">
      {{pocketMonster.pokemonName}}
      <img src="{{pocketMonster.pokemonImage}}">
    </ion-item>
   </ion-list>

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

{
“口袋妖怪”：“Bulbasaur”，
“pokedexNumber”：“001”，
“描述”：“在明亮的阳光下可以看到蓝鲸在打盹。它的背上有一颗种子。通过吸收阳光，种子逐渐变大”，
“口袋妖怪”：
},

您应该使用innerHtml来显示图像：

<span innerHTML="{{pocketMonster.pokemonImage}}"></span>

---

希望有帮助，但首先你应该注意@bgse答案。

尝试使用@JoeWu他会使用

，但他真的不应该。尝试使用@JoeWu他会使用

，但他真的不应该。我从我的数据中取出了预先制作的标签，并将其作为资产。第一种方法对我不起作用。它在co中出现了404错误nsole。但是使用[src]的第二个方法不起作用。我不知道为什么第一个方法不起作用，但非常感谢您的帮助！我从数据中取出了预制标记，并使其成为资产。的第一个方法对我不起作用。它在控制台中出现了404错误。但是使用[src]的第二个方法是的。我不知道为什么第一种方法不起作用，但非常感谢您的帮助！我尝试了这个方法，但它不起作用，我也不知道为什么。但我按照@bgse的建议做了，并从数据中取出了预制标记，使其仅为“assets/imgs/bulbasaur.png”然后使用了他建议的第二种方法，这很有效。我尝试了这一方法，但不起作用，我不知道为什么。但我按照@bgse的建议做了，从数据中去掉了预制标签，使其仅为“assets/imgs/bulbasaur.png”，然后使用了他建议的第二种方法，这很有效。