在Visual Studio的ASP.NET Core + Angular 2模板上设置图像路径 [英] Set Image path on ASP.NET Core + Angular 2 template for Visual Studio

问题描述

我需要添加一个如下所示的静态图像.您能告诉我为什么我无法在首页上显示该图像吗?即它不起作用.

I need to add a static image as shown below.Can you tell me why I cannot show the image on home page as shown below ? i.e. It's not working.

这里我使用的是 ASP.NET Core模板包 >

Here I'm using this ASP.NET Core Template Pack

这是一篇很好的文章，来自 史蒂芬·桑德森(Steven Sanderson)

Here is nice article about it from 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)这样说.可能是路径问题.如何正确给出?如上图所示.

it says like this Failed to load resource: the server responded with a status of 404 (Not Found).May be a path issue.how can I give it correctly ? Image is there as shown above.

推荐答案

由于您正在使用Webpack捆绑这些文件，因此只需要使用require.将您的TypeScript代码更改为此:

Since you're using Webpack to bundle these files, you just need to use require. Change your TypeScript code to this:

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

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

... and you're done. Your existing Webpack configuration is already set up to bundle .jpg files using file-loader, so the require call will return the URL of the bundled image.

注意:OP没有提及，但是他们使用的是ASP.NET Core + Angular 2模板

Note: The OP didn't mention, but they are using the ASP.NET Core + Angular 2 template here, which has Webpack all set up already. Therefore this ends up being a a Webpack question, not an Angular question, so the question title is misleading.

这篇关于在Visual Studio的ASP.NET Core + Angular 2模板上设置图像路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！