Webpack inline CSS background images

Question

Я пытаюсь загрузить webpack для загрузки изображений и не могу заставить его работать. Моя конфигурация выглядит следующим образом:

var config = { 
    entry: APP_DIR + '/index.jsx', 
    output: { 
    path: BUILD_DIR, 
    publicPath: "/build/", 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?/, 
     include: APP_DIR, 
     loader: 'babel' 
     }, 
     { 
     test: /\.scss$/, 
     loaders: ["style", "css", "sass"] 
     }, 
     { 
     test: /\.css$/, 
     loader: 'style-loader!css-loader' 
     }, 
     { 
     test : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, 
     loader : 'url-loader' 
     }, 
     { 
     test: /\.(png|jpg|gif)$/, 
     loader: 'file-loader' 
     } 
    ] 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    } 
}; 

И я пытаюсь использовать в качестве фона встроенного CSS изображения, как это:

<div class="inner-panel" 
    style="background-image: url("/common/img/split-image/image.jpg");"> 
</div> 

Также не работает в качестве встроенного изображения:

<img src="/common/img/split-image/image.jpg"> 

Answer 1

Проблема связана с вашими дорожками изображения, а не с конфигурацией вашего веб-пакета.

Попробуйте положить ./ в начале вашего пути, как и

"./common/img/split-image/image.jpg" 

Другое то, что вы должны смотреть на файл требует, так и убедитесь, что размещают их там, где вы хотите разместить их.

Поскольку вы используете файл-загрузчик (и я думаю, React, а), пример того, как вы могли бы использовать его было бы:

//CJS 
var file = require("file!./file.png"); 
//ES6 
import file from "file!./file.png"; 

//Later inside a React component 
    const inStyle = { 
     background-image: 'url(' + file + ')' 
    } 
    <div style={inStyle}/> 

(React принимает объекты, а затем строки для атрибута стиля)

url-loader должен быть одинаковым. Надеюсь это поможет.