Aurelia Webpack：イメージをロードする方法

Question

イメージをロードするために多くの時間を費やしました。だから、他の人のためのメモです。

次のコードはHTTP 404エラーを生成し、背景イメージは表示されませんでした。

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

Answer 1

ここには、skeleton-typescript-webpack/webpack.config.jsの断片があります。 このようにimgs/my-background.pngをコピーする行が必要です。

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

編集：URL-ローダーは、PNG/JPG/GIFファイルのためのロードを処理しているので、私は、URL（XXX）のためのファイルのみをコピーする必要があります。あなたのイメージ、付属バイトの制限を使用してどのようfile-loader作品、それに

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

非常に同様url-loader作品：

Answer 2

画像を扱うために、私はurl-loaderとwebpack.config.jsあなたのルールでは、次のセクションを使用します実際のファイルの代わりにDataURLに変換され、生成されたバンドルにインライン展開されます。