title: Webpack: load images from inline style (background-image)
body: <p>I have a problem with loading an image using webpack.</p>
  
  <p>When I use an image tag on an html page, everything works fine:</p>
  
  <pre><code> &lt;img src="../../content/images/logo.png"&gt;
  </code></pre>
  
  <p>But I also have a need to use inline styles:</p>
  
  <pre><code>&lt;div style="background-image: url('../../content/images/logo.png')"&gt;
  </code></pre>
  
  <p>In this case, webpack doesn't resolve the images and leaves the string in the <code>url()</code> untouched.</p>
  
  <p>Webpack config:</p>
  
  <pre><code>        module: {
          rules: [
              { test: /bootstrap\/dist\/js\/umd\//, loader: 'imports-loader?jQuery=jquery' },
              {
                  test: /\.ts$/,
                  loaders: [
                      'angular2-template-loader',
                      'awesome-typescript-loader'
                  ],
                  exclude: ['node_modules/generator-jhipster']
              },
              {
                  test: /\.html$/,
                  loader: 'html-loader',
                  options: {
                      minimize: true,
                      caseSensitive: true,
                      removeAttributeQuotes:false,
                      minifyJS:false,
                      minifyCSS:false
                  },
                  exclude: ['./src/main/webapp/index.html']
              },
              {
                  test: /\.scss$/,
                  loaders: ['to-string-loader', 'css-loader', 'sass-loader'],
                  exclude: /(vendor\.scss|global\.scss)/
              },
              {
                  test: /(vendor\.scss|global\.scss)/,
                  loaders: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
              },
              {
                  test: /\.css$/,
                  loaders: ['to-string-loader', 'css-loader'],
                  exclude: /(vendor\.css|global\.css)/
              },
              {
                  test: /(vendor\.css|global\.css)/,
                  loaders: ['style-loader', 'css-loader']
              },
              {
                  test: /\.(jpe?g|png|gif|svg|woff2?|ttf|eot)$/i,
                  loaders: ['file-loader?hash=sha512&amp;digest=hex&amp;name=/images/[hash].[ext]']
              }
          ]
      },
  </code></pre>
  
  <p>I would be grateful if someone could help me with this issue.</p>