node.js - Webpack 图像加载器通过 CSS 提供动态内联背景图像？

Question

我将 webpack 与 React 一起使用，我通常这样导入和使用我的图像:

 import CalNotices from 'assets/img/calendar-notices.png';

 <img className='img-center' role='presentation' src={CalNotices}/>

效果很好，当我进行生产构建时，这些图像会整齐地放入适当的文件夹中。

但是，有时，我想使用图像作为背景，并这样使用它:

const divStyle = {
     backgroundImage: `url(${item.logo})`,
     backgroundSize: 'contain',
     backgroundRepeat: 'no-repeat',
     backgroundPosition: 'center' 
}
<div className='image-holder' style={divStyle}></div>

其中 item.logo 是图像的绝对路径。

这在开发中工作得很好，但是当我进行产品构建时，这些图像显然丢失了，因为它们没有被 webpack 图像加载器拾取。我应该如何处理这个问题？

我的图像加载器配置是

{
    test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
    include: [paths.appSrc, paths.appNodeModules],
    loader: 'file',
    query: {
      name: 'static/media/[name].[ext]'
    }
},

Answer 1

根据您的评论(所有图像均位于 /src/assets/img/logos 中)，您可以利用 webpack 的 require.context在构建时捆绑整个 Logo 文件夹的功能:

// causes webpack to find and bundle *all* files in logos or one of its subfolders.
const logoContext = require.context("assets/img/logos", true, /\.(png|jpg)$/);

// later...in your render() method
// assumes item.logo is a path relative to the logos folder
// example: "credit-card-xxx.jpg" or "./credit-card-xxx.jpg"
const logoUrl = logoContext.resolve(item.logo);