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

我使用的WebPack有反应，我通常导入和使用我的图片这样：通过CSS动态内联背景图像的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是对图像的绝对路径。

这可以在dev中正常工作，但是当我制作prod时，那些图像显然缺失，因为它们没有被webpack图像加载器拾取。我应该如何处理这个问题？

我的图像加载器的配置是

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

来源

2016-08-30 nuway

'item'是如何定义的？ – Brandon

通过该评论我的意思是，它的工作原理是一样的。你可以设置你的divStyle为'backgroundImage：'url（$ {CalNotices}）''，并且工作得很好，并且像正常一样捆绑。 Somethning与你填充'item.logo'的方式不同，它可能会绕过webpack。 – Brandon

@Brandon item是一个包含属性标识的对象，它保存为背景图像的绝对路径。该图像从未通过导入“图像路径”导入，因为它可以是任何路径。 – nuway

根据您的意见（所有的图像都在/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);

来源

2016-08-30 20:31:41 Brandon

这仍然是webpack 2.0中的事情吗？ – thatmiddleway

我还没有尝试过webpack 2，但是[迁移指南]（https://webpack.js.org/guides/migrating/）没有专门调用它，所以它*可能*起作用。 – Brandon

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

回答

相关问题