背景画像はWebPACKの

Question

のためのJSをCSSで動作ではなく、私はそれが正常に動作します私のCSSで背景画像を設定した場合はWebPACKの3を使用して

イム：しかし

body { 
    background: url('./img/1.jpg'); 
} 

私はJavaScriptで同じことを行うとき、画像がページに表示されますdoesntのと、私はエラーを取得する：

const body = document.querySelector('body'); 
body.style.backgroundImage = 'url("./img/1.jpg")'; 

Failed to load resource: the server responded with a status of 404 (Not Found) 

私は、ファイルローダーが私のJavaScriptでCSSで画像アセットを認識するだけではないので、これはあると思います。これは正しいです？もしそうなら、私はそれをどのように修正するのですか？

は、ここに私のwebpack.config.js

const path = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const CleanWebpackPlugin = require('clean-webpack-plugin'); 

module.exports = { 
    entry: './src/script.js', 
    devServer: { 
    contentBase: './dist' 
    }, 
    plugins: [ 
    new CleanWebpackPlugin(['dist']), 
    new HtmlWebpackPlugin({ 
     title: 'Swipe time' 
    }) 
    ], 
    output: { 
    filename: 'bundle.js', 
    path: path.resolve(__dirname, 'dist') 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.css$/, 
     use: [ 
      'style-loader', 
      'css-loader' 
     ] 
     }, 
     { 
     test: /\.(png|svg|jpg|gif)$/, 
     use: [ 
      'file-loader' 
     ] 
     } 
    ] 
    } 
}; 

Answer 1

アイブ氏は、それが動作しますが、変数としてイメージをインポートなっています。

import Image from './img/1.jpg'; 
const body = document.querySelector('body'); 
body.style.backgroundImage = `url(${Image})`;