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

Question

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

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

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

在app.component.html（这是我申请的根目录）中，我把

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

当我ng serve查看我的网络应用程序时，图像不会显示。

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

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

Answer 1

我修好了。我的实际图像文件名中有空格，无论出于什么原因，Angular都不喜欢它。当我从文件名中删除空格时，assets/images/myimage.png工作了。

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?

Answer 3

特定于Angular2到5，我们可以使用属性绑定绑定图像路径，如下所示。图像路径用单引号括起来。

示例

<img [src]="'assets/img/klogo.png'" alt="image">

Answer 4

Angular-cli默认情况下在构建选项中包含资产文件夹。当我的图像名称带有空格或破折号时，出现此问题。 例如：

• “ my-image-name.png”应为“ myImageName.png”
• “我的图像名称.png”应为“ myImageName.png”

如果将图像放在assets / img文件夹中，那么此代码行应在模板中起作用：

<img alt="My image name" src="./assets/img/myImageName.png">

如果问题仍然存在，只需检查您的Angular-cli配置文件，并确保在构建选项中添加了资产文件夹。

Answer 5

通常情况下，“app”是您应用的根源 - 您是否尝试过app/path/to/assets/img.png？

Answer 6

1。在组件的顶部添加此行。

declare var require: any

2。在组件类中添加此行。

imgname= require("../images/imgname.png");

1. 在html页面的img src标签中添加'imgname'。

   <img src={{imgname}} alt="">

Answer 7

对我来说，“我”是“图片”中的大写。这也是angular-cli不喜欢的。因此它也是区分大小写的。

Answer 8

始终取决于您的html文件在哪里引用静态资源（在本例中为图片）的路径。

示例A：

src
|__assests
   |__images
      |__myimage.png
|__yourmodule
   |__yourpage.html

如您所见，yourpage.html与根目录（src文件夹）相距一个文件夹，因此，它需要一定数量的 ../ 返回根目录，然后您可以从根目录转到图片：

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

示例B：

src
|__assests
   |__images
      |__myimage.png
|__yourmodule
   |__yoursubmodule
      |__yourpage.html

在这里，您必须在树上按2个文件夹进入u：

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

Answer 9

加载图像时尽量不要留出空间。

代替

<img src='assets/img/myimage.png' alt="">     

尝试使用字符串插值或属性绑定来加载源图像作为最佳实践。