通过 CSS 使用动态内联背景图像的 Webpack 图像加载器？答案

【问题标题】：Webpack image loader with dynamic inline background images via CSS?通过 CSS 使用动态内联背景图像的 Webpack 图像加载器？
【发布时间】：2016-08-30 19:54:23
【问题描述】：

我正在使用带有 react 的 webpack，我通常会这样导入和使用我的图像：

 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]'
    }
},

【问题讨论】：

item 是如何定义的？
我的意思是说，这一切都是一样的。您可以将您的 divStyle 设置为backgroundImage: 'url(${CalNotices})'，这样就可以正常工作并像平常一样捆绑在一起。您填充 item.logo 的方式可能会绕过 webpack。
@Brandon item 是一个包含属性 logo 的对象，它保存到背景图像的绝对路径。该图像永远不会通过 import 'path to image" 声明导入，因为它可以是任何路径。
如果不通过webpack导入，那么webpack如何捆绑呢？ Webpack 通过以下 import 语句捆绑资产。
但是如果我不知道它的路径并且它可以是任何东西，我该如何导入它？ src来自动态json

标签： node.js reactjs webpack webpack-dev-server

【解决方案1】：

根据您的 cmets（所有图像都在 /src/assets/img/logos 中），您可以利用 webpack 的 require.context 功能在构建时捆绑整个徽标文件夹：

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

【讨论】：

我没有尝试过 webpack 2，但 migration guide 并没有明确指出这一点已更改，因此它可能有效。