Set Image path on ASP.NET Core + Angular 2 template for Visual Studio

Question

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

\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";
}

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.

Answer 1

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.

Answer 2

Include image folder in angular-cli.json under assets node like below

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