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);
- Fuse.js:当有两个单词要search时,如何返回完全匹配?
- Node Docker容器 – 运行时从Git Repo拉取节点应用程序源
- 从Javascript中的DateTime对象中提取唯一的date?
- node-gyp OSX 10.7.5 – dyld:懒惰符号绑定失败:找不到符号
- 在AJAX调用(使用ExpressJS)之后,通过EJS模板中的数组循环的正确方法是什么?
- 套接字断开连接时,是否必须删除事件监听器?
- 在其他networking上的生产Web应用程序中查找Phillips Hue Bridge
- 完全虚拟的Mongoose模式,保存在内存中,不会持久化
- 如何启动与咕噜茉莉testing?