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 AS

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.