javascript - ReactJS应用程序无法加载背景图片

Question

我很少发现无法找到答案的问题，但这一次我真的被难住了 - 如果我的问题被证明是愚蠢或微不足道的，我提前表示抱歉。

我正在构建一个简单的 React 应用程序，我应该为 Home 组件提供一个背景图像，即 .svg文件。然而，图像没有加载 - 开发工具网络部分说它无法加载图像 - 但它确实显示在那里，带有散列文件名，所以我猜测文件加载器可以工作。我也在使用react-css-modules。我尝试了几种方法:

React 组件 v.1

import React from 'react'
import CSSModules from 'react-css-modules'
import styles from '../styles/home.css'

class Home extends React.Component {
render() {
return (
  <div className='homeContainer' styleName='homeBg'>
    <div className='col-sm-12 text-center'>
      <div className="jumbotron col-sm-6 col-sm-offset-3" styleName='transparentBg'>
        <h1>Enter Your Location</h1>
        <form>
          <div className="form-group">
            <input type="text" className="form-control" placeholder='Location...' />
          </div>
          <div className="form-group">
            <button className='btn btn-lg btn-submit btn-success' type="submit">Continue</button>
          </div>
        </form>
      </div>
    </div>
  </div>
);
}
}
export default CSSModules(Home, styles)

这是 CSS 模块:

.homeBg {
    background-image: url(../images/pattern.svg)
}
...

还有我的 Webpack 配置:

loaders: [
  {test: /\.js$/, exclude: '/node_modules/', loader: 'babel-loader'},
  {test: /\.css$/,
    loaders: [
      'style?sourceMap',
      'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
  },
  {test: /\.svg$/, loader: 'file-loader'}
]

这是我在组件中尝试的第二种方法:

render() {
const bgImg = require('../images/pattern.svg')

const background = {
  backgroundImage: 'url(' + bgImg + ')'
}

return (
  <div className='homeContainer' style={background}>
...

但无论我做什么 - 图像都无法加载。它以常规 <img> 加载。标签，但不作为背景。我还能尝试什么？预先感谢您的任何建议!

Answer 1

你可以尝试一下第二个例子吗

render() {
  const bgImgUrl = // Insert the url for your image here

  const background = {
    backgroundImage: 'url(' + bgImgUrl + ')';
  }

  ...
}

而不是使用 require?每https://facebook.github.io/react/tips/inline-styles.html看起来它需要一个实际的 url 才能执行此操作。