Webpack：インラインスタイル（背景画像）から画像をロード

Question

webpackを使用して画像を読み込む際に問題があります。

私はhtmlページにイメージタグを使用すると、すべてが正常に動作します：

<img src="../../content/images/logo.png"> 

しかし、私はまた、インラインスタイルを使用する必要があります。この場合

<div style="background-image: url('../../content/images/logo.png')"> 

、doesnのWebPACKの画像を解決して文字列をそのまま残してください。url()

のWebPACKの設定：

 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&digest=hex&name=/images/[hash].[ext]'] 
      } 
     ] 
    }, 

誰かがこの問題で私を助けることができる場合、私は感謝されます。その後、

require("html-loader?interpolate!./your-file.html"); 

...とあなたのインライン化スタイルの背景画像のように必要です：あなたはinterpolation flag enabledであなたの'html'ファイルが必要になることがあります

Answer 1

このHTTPSに関する未解決の問題があります

<div style="background-image: url('${require(`../../content/images/logo.png`)}')">