Webpack图像加载器通过CSS的dynamic内联的背景图像?

我使用webpack的反应,我通常导入和使用我的图像,如:

import CalNotices from 'assets/img/calendar-notices.png'; <img className='img-center' role='presentation' src={CalNotices}/> 

工作正常,当我做生产build设,这些图像区域整齐地放入适当的文件夹。

但是,有时候,我想使用图像作为背景,并使用它:

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

item.logo是图像的绝对path。

这在开发工作正常,但是当我做一个prod构build,这些图像显然是缺less,因为他们没有被拾起的webpack图像加载器。 我应该如何处理这个?

我的图像加载器configuration是

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

根据您的意见(所有图片都在/src/assets/img/logos ),您可以利用webpack的require.contextfunction在构build时捆绑整个徽标文件夹:

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