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

Question

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

这里我用的是ASP.NET Core Template Pack

这是来自Steven Sanderson的不错的文章

\home\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 配置已设置为使用 file-loader 捆绑 .jpg 文件，因此 require 调用将返回捆绑图像的 URL。

---

注意：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 使用属性绑定。