title: ReactJS app can't load background image
body: <p>I rarely find a problem that I can't already find an answer to, but this time I'm really stumped - and I'm sorry in advance if my question will prove silly or trivial.</p>
  
  <p>I'm building a simple React app, and I'm supposed to give the Home component a background image, which is an <code>.svg</code> file. However, the image does not load - dev tools Network section says it could not load the image - but it does show up there, with a hashed filename, so I'm guessing the file-loader works. I'm also using react-css-modules. I've tried a couple approaches:</p>
  
  <p><strong>React Component v.1</strong></p>
  
  <pre><code>import React from 'react'
  import CSSModules from 'react-css-modules'
  import styles from '../styles/home.css'
  
  class Home extends React.Component {
  render() {
  return (
    &lt;div className='homeContainer' styleName='homeBg'&gt;
      &lt;div className='col-sm-12 text-center'&gt;
        &lt;div className="jumbotron col-sm-6 col-sm-offset-3" styleName='transparentBg'&gt;
          &lt;h1&gt;Enter Your Location&lt;/h1&gt;
          &lt;form&gt;
            &lt;div className="form-group"&gt;
              &lt;input type="text" className="form-control" placeholder='Location...' /&gt;
            &lt;/div&gt;
            &lt;div className="form-group"&gt;
              &lt;button className='btn btn-lg btn-submit btn-success' type="submit"&gt;Continue&lt;/button&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
  }
  }
  export default CSSModules(Home, styles)
  </code></pre>
  
  <p>Here's the CSS Module:</p>
  
  <pre><code>.homeBg {
      background-image: url(../images/pattern.svg)
  }
  ...
  </code></pre>
  
  <p>And my Webpack config:</p>
  
  <pre><code>loaders: [
    {test: /\.js$/, exclude: '/node_modules/', loader: 'babel-loader'},
    {test: /\.css$/,
      loaders: [
        'style?sourceMap',
        'css?modules&amp;importLoaders=1&amp;localIdentName=[path]___[name]__[local]___[hash:base64:5]'
      ]
    },
    {test: /\.svg$/, loader: 'file-loader'}
  ]
  </code></pre>
  
  <p>Here's the second approach I tried in the component:</p>
  
  <pre><code>render() {
  const bgImg = require('../images/pattern.svg')
  
  const background = {
    backgroundImage: 'url(' + bgImg + ')'
  }
  
  return (
    &lt;div className='homeContainer' style={background}&gt;
  ...
  </code></pre>
  
  <p>But whetever I do - the image does not load. It loads in a regular <code>&lt;img&gt;</code> tag, but not as a background. What else could I try? Thanks in advance for any suggestions!</p>