Very simple: requiring images in webpack and Angular 2

Question

I am having some trouble requiring images in my Angular 2 webpack applicaiton.

I have tried three or four image loaders but I don't seem to be able configure them properly and the result in the HTML is incorrect.

For example, at the moment I have:

<img src='${require("../images/logo.png")}'>

The file containing this image is part of a template which is required like this:

@Component({
    selector: 'appstore-app',
    directives: [ ...ROUTER_DIRECTIVES ],
    styles: [require('../sass/appstore.scss').toString()],
    template: require('./app.component.html')
})

This results in an error in the browser:

GET: http://localhost:8080/$%7Brequire(%22../images/logo.png%22)%7D 

My loader for images image my webpack.config.js looks like this:

{ test: /\.(png|jpg|gif)$/, loader: "url-loader?limit=50000&name=[path][name].[ext]" }

I may well be muddling syntaxes here but as I've said I've tried a few methods. This doesn't work. The $require makes it into the HTML verbatim without being transformed!

How do I either copy the images to the build folder or package them as a DataURL?

Please help!

Answer 1

For example

<img src={{appstore-logo}}>

and your component code is

@Component({
    selector: 'appstore-app',
    directives: [ ...ROUTER_DIRECTIVES ],
    styles: [require('../sass/appstore.scss').toString()],
    template: require('./app.component.html')
})
export class AppStoreComponent {
    private appStoreImage: any = require('../images/logo.png');
}

You must insert this code before applying this Component.

declare function require(name: string): string;

this code in your AppModule

Please let me know if there's a better way.

Answer 2

You should do it like so. I know you figured it out but for future reference you don't need to use require; use ____Url instead. Require caused me issues with other libraries using webpack for loading assets....it's not needed.

     <img src="../images/logo.png">

//note styleUrl and templateUrl since you have a path not inline with component
        @Component({
            selector: 'appstore-app',
            directives: [ ...ROUTER_DIRECTIVES ],
            styleUrl: ['../sass/appstore.scss'],
            templateUrl: './app.component.html'
        })