Webpack image loader with dynamic inline background images via CSS? - node.js

Question

I'm using webpack with react, and I usually import and use my images as such:
import CalNotices from 'assets/img/calendar-notices.png';
<img className='img-center' role='presentation' src={CalNotices}/>
that works fine, and when I do production build, those images area neatly put into appropriate folders.
However, at times, I want to use images for backgrounds, and use it as such:
const divStyle = {
backgroundImage: `url(${item.logo})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center'
}
<div className='image-holder' style={divStyle}></div>
with item.logo being an absolute path to the image.
This works fine in dev, but when I do a prod build, those images are obviously missing, since they didn't get picked up by the webpack image loader. How should I approach this?
my image loader config is
{
test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
include: [paths.appSrc, paths.appNodeModules],
loader: 'file',
query: {
name: 'static/media/[name].[ext]'
}
},

Answer 1

Based on your comments (all of the images are in /src/assets/img/logos), you can leverage webpack's require.context functionality to bundle the entire logo folder at build time:
// 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);