在Visual Studio的ASP.NET Core + Angular 2模板上设置图像路径

Question

我需要添加一个静态图像，如下所示。你能告诉我为什么我不能在主页上显示图像，如下所示？即它没有用。

我在这里使用ASP.NET Core Template Pack

以下是来自Steven Sanderson

的好文章

\家\ home.component.html

<img src="{{heroImageUrl}}" style="height:30px">

home.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'home',
    template: require('./home.component.html')
})
export class HomeComponent {

    public heroImageUrl ="./image/employee_management.jpg";
}

错误：

它像这样说Failed to load resource: the server responded with a status of 404 (Not Found)。可能是路径问题。我可以正确地给它吗？图像就在上面。

Answer 1

由于您使用Webpack捆绑这些文件，因此您只需使用require即可。将TypeScript代码更改为：

public heroImageUrl = require("./image/employee_management.jpg");

......你已经完成了。您现有的Webpack配置已设置为使用.jpg捆绑file-loader个文件，因此require调用将返回捆绑图像的网址。

注意：OP没有提及，但他们使用的是ASP.NET Core + Angular 2模板here，它已经设置了Webpack。因此，这最终成为一个Webpack问题，而不是Angular问题，因此问题标题具有误导性。

Answer 2

在资产节点下的angular-cli.json中包含图像文件夹，如下所示

 "assets": [
        "assets",
        "favicon.ico",
        "fonts",
        "images"
      ],

Answer 3

要注意两件事，首先使用src属性的括号：

<img [src]="heroImageUrl " />

其次，确保图像的url相对于用于显示组件的路径的url。因为这通常不是一件好事，所以我建议从应用程序的根目录中创建绝对URL：

public heroImageUrl ="/ClientApp/app/components/home/image/employee_management.jpg";

然后更好的是，将它放在像/images/employee_management.jpg

这样的公共位置

Answer 4

根据您的设置，您可能必须将静态数据文件放在ressource / assets文件夹中。

我的设置将我网站的根目录放在/src中。我将角文件放在子文件夹/src/app中，如果我想链接到图像，我将它们放在名为/src/assets的src子文件夹中。链接这些图像时，我只需将路径写为/src是根，因此链接到名为employee_management.jpg的图像将在

中

'assets/employee_management.jpg'

我使用Angular CLI btw，它使用webpack捆绑所有。

Answer 5

你应该使用

<img [attr.src]="heroImageUrl" style="height:30px">

或

<img attr.src="{{heroImageUrl}}" style="height:30px">

还要确保path应该是相对的。

  

默认情况下，Angular使用属性绑定。告诉Angular明确地使用属性绑定。