使用加载程序找不到webpack参考图像

Question

我使用的更少，这是我的webpack 2配置。

{
    test: /\.less$/,
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: ['css-loader','less-loader']
    })
}

它工作正常，但是当我的less文件中具有这样的背景图像值时，图像丢失

.section-one{
    background-color: @red500;
    background-image: url(/images/landing/header.jpg);
    background-position: center;
}

我有错误

GET http：// localhost：8080 / images / landing / header.jpg 404（未找到）

在我的Chrome控制台中，因为我使用了webpack开发服务器

Answer 1

较少的加载程序不必解决您的问题。 我解决的方法就是这样：

        {
            test: /\.(jpe?g|png|gif|svg)$/,
            include: helpers.root('src', 'app'),
            loader: "file-loader",
            query: {
                name: 'img/[name].[ext]'
            }
        }

这是您加载图像的部分，使用查询将路径设置为img /。 在ts文件中，您需要添加以下行：

require（'./ img / your-image-name.png'）;

之后，您可以在您的less文件中使用它，如下所示：background-image：url（img / your-image-name.png）;