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-loader处理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而不是实际文件，并将其内联到生成的包中。

Aurelia Webpack：如何加载图片

2 个答案: