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

Question

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

在这里,我使用的是这个ASP.NET核心模板包

下面是关于它的好文章,从史蒂芬·桑德森

\家\ 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调用将返回捆绑映像的URL.

注:OP没有提及,但他们使用的是ASP.NET核心+角2模板这里,这一切的WebPack成立了.因此,这最终成为一个Webpack问题,而不是Angular问题,因此问题标题具有误导性.