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

问题描述

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

这里我使用的是这个

homehome.component.html

home.component.ts

import { Component } from '@angular/core';@零件({选择器:'家'，模板:需要('./home.component.html')})导出类 HomeComponent {public heroImageUrl ="./image/employee_management.jpg";}

错误:

它是这样说的如上图所示.

解决方案

由于您使用 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 问题，因此问题标题具有误导性.

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.

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

Here is nice article about it from Steven Sanderson

homehome.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";
}

Error :

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.

解决方案

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");

... 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.

---

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.

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