Set Image path on ASP.NET Core + Angular 2 templat

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

Depending on what your setup is, you probably have to place the static data files in a ressource/assets folder.

My setup places the root of my site in /src. I place angular files in the subfolder /src/app and if i want to link to images i place those in a subfolder of src called /src/assets. When linking those images, i simply write the path as if /src is the root, so linking to an image called employee_management.jpg would be in

'assets/employee_management.jpg'

I use the Angular CLI btw, which uses webpack to bundle it all.

Answer 2

you should use

<img [attr.src]="heroImageUrl" style="height:30px">

or

<img attr.src="{{heroImageUrl}}" style="height:30px">

also make sure path should be relative.

Angular by default uses property binding. To tell Angular explicitly to use attribute binding.

Answer 3

Two things to note, first use brackets for the src property:

<img [src]="heroImageUrl " />

Second, make sure the url of the image is relative to the url of the route that is used to display the component. Because this is generally not a great thing to do, I'd recommend making the url absolute from the root of the application:

public heroImageUrl ="/ClientApp/app/components/home/image/employee_management.jpg";

And then better yet, place it in a common location like /images/employee_management.jpg

Answer 4

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

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

Answer 5

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.