如何在 Angular 项目中加载图像（和其他资产）？

Question

我是 Angular 的新手，所以我不确定这样做的最佳做法。

我使用 angular-cli 和 ng new some-project 来生成一个新的应用程序。

它在“资产”文件夹中创建了一个“图像”文件夹，所以现在我的图像文件夹是 src/assets/images

在 app.component.html （这是我的应用程序的根），我把

<img class="img-responsive" src="assets/images/myimage.png">

当我执行 ng serve 查看我的 Web 应用程序时，图像不显示。

在 Angular 应用程序中加载图像的最佳做法是什么？

编辑：请参阅下面的答案。我的实际图像名称使用了空格，这是 Angular 不喜欢的。当我删除文件名中的空格时，图像可以正确显示。

原文由 user3183717 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我修好了它。我的实际图像文件名中有空格，但出于某种原因 Angular 不喜欢这样。当我从文件名中删除空格时， assets/images/myimage.png 起作用了。

原文由 user3183717 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在我的项目中，我在 app.component.html 中使用了以下语法：

 <img src="/assets/img/1.jpg" alt="image">

或者

<img src='http://mruanova.com/img/1.jpg' alt='image'>

使用插值绑定属性时，使用 [src] 作为模板表达式：

 <img [src]="imagePath" />

是相同的：

 <img src={{imagePath}} />

来源： how to bind img src in angular 2 in ngFor?

原文由 mruanova 发布，翻译遵循 CC BY-SA 4.0 许可协议