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('./appponent.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!

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.ponent.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!

• javascript
• angular
• webpack

• Do you have solved this? How? – antonio Commented Nov 8, 2016 at 18:08

4 Answers 4

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 ponent
        @Component({
            selector: 'appstore-app',
            directives: [ ...ROUTER_DIRECTIVES ],
            styleUrl: ['../sass/appstore.scss'],
            templateUrl: './app.ponent.html'
        })

For example

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

and your ponent code is

@Component({
    selector: 'appstore-app',
    directives: [ ...ROUTER_DIRECTIVES ],
    styles: [require('../sass/appstore.scss').toString()],
    template: require('./app.ponent.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.

Found the answer.

There's no need to $require the src in the image; webpack will handle this with the right loader.

I did not proof check this, but this is the general idea:

Require it to a variable in the respective controller in the following manner

$scope.imageSrc = require('../images/logo.png');

And then in your template, the imageSrc would either be base64 encoded or the data url as per your loader config.

<img src='{{imageSrc}}'>