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! 
]), 

編輯：由於網址加載器加載處理爲PNG/JPG/GIF文件，我需要複製唯一的文件URL（XXX）。

Answer 2

對於處理圖像，我會使用url-loader和webpack.config.js的規則中的以下部分：

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

的url-loader作品非常相似怎麼file-loader的作品，但使用所提供字節的限制，你的圖片將被轉換爲DataURL的而不是實際的文件，並將這些文件內聯到您生成的捆綁包中。