title: Using webpack and url-loader to load inline images in React
body: <p>I need to use a inline style and pass in the url of a image file. I do it like this: </p>
  
  <pre><code>let url = `url(${this.state.logo})`
          var cardStyle = {
              backgroundImage: url,
              backgroundSize: '200px 50px',
              backgroundRepeat: 'no-repeat'
          }
  </code></pre>
  
  <p>Then use it in div like this:</p>
  
  <pre><code>&lt;div className='work-card' style={cardStyle}&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The url would be a property passed in something like '../images/logos/ciena.png', which is the path to the image relative to the component.</p>
  
  <p>However when i run the app using webpack i get a 404 on the image. The error comes in like this: <code>http://localhost:8080/images/logos/ciena.png 404 (Not Found)</code></p>
  
  <p>I am using url-loader to load images and it is working fine when using images in scss files however inline it is not working and I don't know how to fix it.</p>
  
  <p>My Webpack config: </p>
  
  <pre><code>const HtmlWebPackPlugin = require("html-webpack-plugin");
  
  const htmlWebpackPlugin = new HtmlWebPackPlugin({template: "./src/index.html", filename: "./index.html"});
  
  module.exports = {
      output: {
          publicPath: "/"
      },
      module: {
          rules: [
              {
                  test: /\.js$/,
                  exclude: /node_modules/,
                  use: {
                      loader: "babel-loader"
                  }
              }, { // regular scss files to css
                  test: /\.scss$/,
                  loader: 'style-loader!css-loader!sass-loader'
              }, {
                  test: /\.(jpe?g|png|gif|svg)$/i,
                  loader: 'url-loader',
                  options: {
                      limit: 8000, // Convert images &lt; 8kb to base64 strings
                      name: 'images/[name].[ext]'
                  }
              }, {
                  test: /\.(pdf|docx)$/,
                  loader: 'file-loader?name=documents/[name].[ext]',
              }
          ]
      },
      devServer: {
          historyApiFallback: true
      },
      plugins: [htmlWebpackPlugin]
  };
  </code></pre>
  
  <p>Thank you for your help!</p>