html - angular教程 - angular框架




如何在Angular项目中加载图像(和其他资源)? (4)

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

declare var require: any

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

imgname= require("../images/imgname.png");
  1. 在html页面的img src标签中添加这个'imgname'。

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

我对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">

当我用于查看我的Web应用程序时,图像不会显示。

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

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


Angular-cli默认包含构建选项中的assets文件夹。 当我的图像名称有空格或破折号时,我遇到了这个问题。 例如 :

  • 'my-image-name.png'应为'myImageName.png'
  • 'my image name.png'应为'myImageName.png'

如果您将图像放在assets / img文件夹中,那么这行代码应该在您的模板中工作:

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

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


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


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

示例示例

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







angular-cli