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

106

我对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不喜欢的空格。当我删除文件名中的空格时，图像正确显示。

html angular angular-cli

— 用户名
source

1

是的，您是对的，您从Assets Fodler提供了正确的路径语法，可能名称不匹配有问题，请检查图像是否存在

— Pardeep Jain

1

绝对不是名称不匹配，我最终在– public外面创建了一个文件夹src并显示图像<img class="img-responsive" src="../../public/images/myimage.png">

— user3183717

解决它。我的实际图像文件名中带有空格，而无论出于何种原因，Angular都不喜欢。当我从文件名中删除空格时，assets/images/myimage.png就可以了。

— user3183717

1

好：）顺便说一句，无需在更新的cli中创建额外的公用文件夹，因为它们已经具有相同的命名资产。

— Pardeep Jain

对于具有其他扩展名的文件，我也有类似的问题（例如.sgf），我想托管这些文件并从应用程序链接到它们，但是显然仅将它们放在assets文件夹中是不够的。有任何想法吗？

— bvdb

72

我修好了它。我的实际图像文件名中带有空格，而无论出于何种原因，Angular都不喜欢。当我从文件名中删除空格时，assets/images/myimage.png就可以了。

— 用户名
source

62

在我的项目中，我在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}} />

来源：如何在ngFor的angular 2中绑定img src？

— 姆鲁瓦诺娃
source

1

您的app.component.html和Assets文件夹处于同一级别吗？

— 哈利尔

不，文件夹结构是自动创建的，您应该拥有与我相同的文件夹：project-folder \ src \ assests \和project-folder \ app \ app.component.html（如果有帮助的话）。

— mruanova

26

默认情况下，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配置文件，并确保在构建选项中添加了资产文件夹。

— mu
source

1

[alt]对于字符串不是必需的，[]对于数据绑定是必需的。

— chris_r

14

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

样例

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

— 布万·马哈然（Bhuwan Maharjan）
source

src =“ assets / img / klogo.png”和[src] =“'assets / img / klogo.png'”有什么区别？

— gdbj

@gdbj这里就是答案stackoverflow.com/questions/41426974/...

— 莫希特uprim

因此，基本上，如果我们希望能够使用该方法更改src，则可以使用[src]绑定到模型。

— gdbj

感谢mohit回答了主题。@gdbj希望您现在已经解决了您的困惑。

— Bhuwan Maharjan

谨在此指出，以便将来的读者在gdbj的第一个评论中寻找内在的单引号。在注释字体中比在上面的答案中更难看到它们，但是缺少它们可能会导致一些混乱。（可能不确定，具体取决于您的浏览器。）

— SilithCrowe

7

通常，“ app”是您应用程序的根目录-您是否尝试过app/path/to/assets/img.png？

— 克里斯皮
source

angular-cli put app和assets文件夹分别位于src文件夹下。（对不起，我不确定如何设置文件夹结构和名称的格式）

— user3183717 2015年

5

1。将此行添加到组件的顶部。

declare var require: any

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

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

在html页面的img src标记中添加此“ imgname”。

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

— 比姆·辛格
source

这对于不平坦的文件层次结构树更好。

— chris_r

-1

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

— 匿名创作者
source

-1

它始终取决于您的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

在这里，您必须通过两个文件夹进入树中：

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

— sznczy
source