Javascript 角度2-*ngFor<；img>；标记src属性填充

我试图在angular 2 web应用程序中使用ngFor循环填充html标记的src属性。我尝试了很多不同的方法，但是我就是不能让图片出现在我的网页上。请参见下面的我的代码：-

HTML代码段：-

<tr *ngFor="let recipe of recipes">
        <td>
          <img src='{{recipe.Image_Path}}' width="100" height="100" />

        </td>
        <td>{{recipe.Recipe_Name}}</td>
        <td>{{recipe.Recipe_Description}}</td>
        <td>{{recipe.Category}}</td>
        <td>{{recipe.Difficulty_Descr}}</td>
        <td>{{recipe.Healthy}}</td>
        <td>{{recipe.Preparation_Time}}</td>
        <td>{{recipe.Vegetarian}}</td>
        <td>
          <a (click)="readOneRecipe(recipe.Recipe_Id)" class="btn btn-primary m-r-5px">
            <span class='glyphicon glyphicon-eye-open'></span> Read
          </a>
        </td>
        <td>
          <a (click)="updateRecipe(recipe.Recipe_Id)" class="btn btn-primary m-r-5px">
              <span class='glyphicon glyphicon-edit'></span> Edit
          </a>
        </td>
        <td>
          <a (click)="deleteRecipe(recipe.Recipe_Id)" class="btn btn-primary m-r-5px">
              <span class='glyphicon glyphicon-remove'></span> Delete
          </a>
        </td>
      </tr>

我知道*ngFor循环中的“recipes”数组包含图像的正确文件路径，因为我可以看到“recipe”变量的内容

下面是我的项目文件夹结构的屏幕截图：-

如果我将chrome web浏览器置于开发模式（F12）并单击console选项卡，则会看到以下错误：-

---

加载资源失败：服务器响应状态为404（未找到）

映像路径不正确，因为

Angular Cli

将您的项目绑定到javascript文件中，因此

/app/images

文件夹将不存在。您需要做的是将您的

图像

文件夹放在

资产

文件夹中，并确保路径如下所示：

./assets/images/noimage.png

---

图像路径不正确，因为

Angular Cli

将您的项目捆绑在javascript文件中，因此

/app/images

文件夹将不存在。您需要做的是将您的

图像

文件夹放在

资产

文件夹中，并确保路径如下所示：

./assets/images/noimage.png

---

您是否尝试过使用

？您是否将img文件夹作为资产包含在.angular-cli.json文件中？您好，Mohammed Ali。是的。这不起作用-（你确定你的

图像路径

正确吗？你在浏览器中检查过源代码吗？。图像通常应该放在资产文件夹中，而不是应用程序文件夹中。虽然图像可以在项目结构中找到，但angular可能没有将这些文件发送到前端，因此链接不可用。）rk.尝试将它们复制到assets/img。您可能必须更改所有元素的图像路径，然后才能使用

？您是否将img文件夹作为asset包含在.angular-cli.json文件中？您好，Mohammed Ali。是的。这不起作用：-（你确定你的

图像路径

正确吗？你在浏览器中检查过源代码吗？。图像通常应该放在资产文件夹中，而不是应用程序文件夹中。虽然图像可以在项目结构中找到，但angular可能没有将这些文件发送到前端，因此链接不可用。）rk。尝试将它们复制到assets/img。你可能必须更改所有元素的图像路径，然后tooOh哇哦，我成功了。感谢所有的帮助。只花了我4-5个小时。所以我将文件路径更改为./assets/images/xxxx.jpg。然后我将我的html更改为-。欢迎兄弟：）哦，哇，我成功了。谢谢你们的帮助。我只花了4-5个小时。所以我将文件路径更改为./assets/images/xxxx.jpg。然后我将我的html更改为-。欢迎兄弟：）。