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.

then sir it is more easy you can directly assign your url in html src=" ". you don't need angular 2 help. but if you pass image using variable consider it as dynamic and i think you should use absolute path. no hard feeling — Amit kumar, Jan 02 '17 at 12:59
but it is not working no ? may be a relative path issue no ? @AmitSuhag — Sampath, Jan 02 '17 at 13:01
are you using webpack ?? use absolute path. relative path will not work.you are trying from ./ <- this means you are checking from current directory. start from /app i guess don't know your app structure. create separte folder asset for images — Amit kumar, Jan 02 '17 at 13:07
you can see my folder structure on my post.please see that. @AmitSuhag — Sampath, Jan 02 '17 at 13:08
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/132099/discussion-between-amit-suhag-and-sampath). — Amit kumar, Jan 02 '17 at 13:10

score 14 · Accepted Answer · answered Jan 03 '17 at 11:24

14

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.

answered Jan 03 '17 at 11:24

Steven Sanderson

990
7
7

Awesome...Thanks a lot :) I have updated the template details. – Sampath Jan 03 '17 at 13:29
I have the same issue with the latest template, but this solution is not working for me? I'm getting this error in the template when I use require `self.parentView.context.require is not a function`. And when I use require in the component I get this error, `Critical dependency: the request of a dependency is an expression`. Need help please, come on Steve -- I know you can help me too. :) – David Pine Mar 01 '17 at 02:39

score 2 · Answer 2 · answered Jan 02 '17 at 13:04

2

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

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

answered Jan 02 '17 at 13:04

Aniket

552
4
13

I don't have such folder.I'm using : https://marketplace.visualstudio.com/items?itemName=MadsKristensen.ASPNETCoreTemplatePack – Sampath Jan 02 '17 at 13:07
When using CLI, we need to add such static files to assets node to tell Angular 2 to add to the deployment folder. I see you have employee_management.jpg file inside image folder. – Aniket Jan 02 '17 at 13:14

score 0 · Answer 3 · answered Jan 02 '17 at 12:31

0

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

answered Jan 02 '17 at 12:31

Robba

7,684
12
48
76

it says like this then `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. – Sampath Jan 02 '17 at 12:40
Putting `src` in brackets is not necessary. The OP's syntax (`src="{{ heroImageUrl }}"`) is perfectly valid. The issue is getting the correct URL. – Steven Sanderson Jan 03 '17 at 11:30

score 0 · Answer 4 · answered Jan 02 '17 at 12:35

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.

I don't have such folders.I'm using https://marketplace.visualstudio.com/items?itemName=MadsKristensen.ASPNETCoreTemplatePack — Sampath, Jan 02 '17 at 13:00

Pardeep Jain · Answer 5 · 2017-01-02T12:38:20.640

-1

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.

edited Jan 02 '17 at 12:38

answered Jan 02 '17 at 12:31

Pardeep Jain

84,110
37
165
215

I don't think `attr.` is necessary. – Günter Zöchbauer Jan 02 '17 at 12:35
in some cases my image is not loading instead throw error so in those cases ill use `attr` so suggested here. i am not sure is it necessary to use `attr` or not, @GünterZöchbauer you can Update my answer with clarification if you want. – Pardeep Jain Jan 02 '17 at 12:39
Would be interesting what exact error you're getting. I would understand that you get an error if you use `{{}}` binding when the used expression can't yet be evaluated because the value is not yet set or similar. – Günter Zöchbauer Jan 02 '17 at 12:40
1

@GünterZöchbauer ill show you the error when next time i face this error. btw thanks for clarification. – Pardeep Jain Jan 02 '17 at 12:42
This answer is incorrect. Using `attr` will make no difference. The issue is with getting the correct image URL, not with emitting the `img` tag. – Steven Sanderson Jan 03 '17 at 11:27
@StevenSanderson question has been changes now earlier my answer was right according to question, earlier the issue was with image binding not with the Path, so you dont have right to downvote this i think so – Pardeep Jain Jan 03 '17 at 12:04

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

5 Answers5

Linked