CODEWITHSUNDEEP
javascriptimagewebpackaurelia
hirano
hirano

Reputation: 106

Aurelia Webpack: how to load images

I spent much time for realizing to load images. So, here is a note for others.

The following code generated HTTP 404 error and my background image did not appear.

my-css {
    background: url('../imgs/my-backgound.png');
}

Upvotes: 1

Views: 811

Answers (2)

hirano
hirano

Reputation: 106

Here is a fragment from the skeleton-typescript-webpack/webpack.config.js. I should have a line for copying the imgs/my-background.png like this. 

new CopyWebpackPlugin([
  { from: 'static/favicon.ico', to: 'favicon.ico' },
  { from: 'imgs/my-background.png', to: 'imgs/my-background.png' },     // add this!
]),

EDIT: Since url-loader handles loading for png/jpg/gif files, I need to copy only files for url(xxx).

Upvotes: 1

Dwayne Charrington
Dwayne Charrington

Reputation: 6622

For handling images, I would use the url-loader and the following in your rules section of webpack.config.js:

{ test: /\.(png|gif|jpg|cur)$/i, loader: 'url-loader', options: { limit: 8192 } },

The url-loader works very similarly to how the file-loader works, but using the supplied byte limit, your images will be converted to DataURL's instead of actual files and inline those into your generated bundles.

Upvotes: 1

Related Questions