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

【问题标题】：webpack reference image not found using loader使用加载程序找不到 webpack 参考图像
【发布时间】：2017-02-19 15:12:57
【问题描述】：

我用的少，这是我的 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 开发服务器

【问题讨论】：

您需要配置 webpack 以将您的静态资产复制到构建文件夹。看到这个答案：stackoverflow.com/questions/27639005/…
@DanielT。我使用了 webpack 开发服务器，为什么我需要这样做？我的 js 文件很好，但 .less 文件中的图像参考不是。
你想通过 webpack 管理镜像还是在 webpack 外部管理镜像？ css-loader 将跳过这样的绝对路径，您将不得不像丹尼尔所说的那样复制文件。如果您可以包含与图像相关的配置，这将有所帮助，因为目前没有足够的信息。
@JuhoVepsäläinen 这是我完整的 webpack.config.js pastebin.com/JqGv7HTw 你能指点我的方向吗？
基于此，我会说对图像进行相对导入应该可以解决它。

标签： javascript webpack webpack-dev-server webpack-2

【解决方案1】：

less 加载器不必对您的问题做任何事情。我解决的方法是这样做的：

        {
            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);

【讨论】：