Javascriptservices: Which image path to be used to show static images

[Sampath-Lokuge]

Hi,

I need to show the static image on home page using this template. I have tried as shown below.But it is not working. When I asked this on Stackoverflow where they're saying to use assets folder. But I cannot see such thing on this template. So can you tell me how to handle static image with this template.If you can provide an example then it's highly appreciated.

I have put the question on Stackoverflow. But none of the solutions are working with this template.

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

[SteveSandersonMS]

You're very close to having it working :) All you need to do is change your TypeScript code from this:

public heroImageUrl ="./image/employee_management.jpg";

... to this:

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

Using a require statement is how to tell Webpack to bundle the referenced asset. In the case of a jpg image, your webpack.config.js is already configured to use url-loader for jpg images, which means the require statement will return a URL matching the bundled image.

Note for anyone who just wants to put images in html templates: If you just want to reference an image from inside an html file, and you don't need to get its URL as a variable in your TypeScript code, then you don't have to use require at all. .html files are already configured to use html-loader, which automatically replaces fixed src attribute values on image tags with the bundled image URL. For example, you can write the following in one of your Angular component templates:

<img src='./image/employee_management.jpg' />

... and that will work just the same. Webpack will bundle the referenced image and change the src attribute to be the URL of the bundled file. You only need to use require if you're trying to obtain the URL inside your TypeScript code.

When I asked this on Stackoverflow where they're saying to use assets folder. But I cannot see such thing on this template.

You can totally use a static assets folder if you want. Just create some directory under wwwroot and put images in there. Then you can reference images from there in the usual way - an image on disk at wwwroot/myimages/someimage.jpg will be reachable at the url /myimages/someimage.jpg. If you do this, you are not using Webpack to bundle those images (files under wwwroot just get deployed independently of Webpack) so don't try to use require to resolve paths to URLs for those.

[SteveSandersonMS]

BTW I've also posted an answer on StackOverflow. If you can mark it as correct, this will avoid confusion for others.

[Sampath-Lokuge]

Aha.. Awesome. Thanks a lot :smile:

[thewavelength]

@SteveSandersonMS If I do the same (latest ASP.NET Core 2.0 preview 2) I get this error with the ASP.NET Core default error page:

You may need an appropriate loader to handle this file type.

even though I have this in my webpack.config.js on the clientBundleConfig:

{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }

My guess would be that it is because this is not on the serverBundleConfig. So I added it. Now the error is gone, but in the output DOM the only thing visible is: <img src="{image}" data-react-id="58">. This obviously shows that the import/require is now working but not being "exposed" to the browser.