Webpack SCSS Liên kết URL của hình ảnh bị hỏng trên đường Nested

Question

Dưới đây là cấu trúc của tôi thư mục:

- public 
- src 
    - app.js 
    - assets 
    - images 
     - logo-b-green.png 
    - stylesheets 
     - nav.scss 

Và:

// webpack.config.js 

module.exports = { 
    entry: './src/app.js', 
    output: { 
    path: './public', 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader' 
     }, 
     { 
     test: /\.scss$/, 
     loaders: ['style', 'css', 'sass'] 
     }, 
     { 
      test: /\.(eot|svg|ttf|woff|woff2)$/, 
      loader: 'file?name=fonts/[name].[ext]' 
     }, 
     { 
     test: /\.(png|jpg|gif)$/, 
     loader: "file-loader?name=images/img-[hash:6].[ext]" 
     } 
    ] 
    }, 
    resolve: { 
    extensions: ['', '.js', '.json'] 
    } 
}; 

Và:

/* nav.scss */ 

#nav-logo { 
    height: 26px; 
    width: 26px; 
    background-size: 100%; 
    background-image: url('../images/logo-b-green.png'); 
    float: left; 
    margin: 16px 0 0 23px; 
} 

Khi tải các tuyến đường đơn cấp hình ảnh của tôi liên kết hoạt động chính xác.

Ví dụ: /search liên kết hình ảnh được hiển thị dưới dạng url(images/img-75fa3d.png) và hoạt động.

Tuy nhiên, nếu tôi đi đến tuyến đường lồng nhau (thông qua Bộ định tuyến phản ứng), ví dụ: /properties/1 liên kết hình ảnh giống nhau và không thể tìm thấy vị trí hình ảnh chính xác vì đó là liên kết tương đối: url(images/img-75fa3d.png).

Hình ảnh từ ví dụ này là logo-b-green.png.

EDIT:

tôi thêm publicPath đến phần output và nó làm việc, bây giờ các url đi gốc rễ. Ai đó có thể xác nhận rằng đây là cách chính xác để xử lý điều này?

output: { 
path: './public', 
filename: 'bundle.js', 
publicPath: '/' 
}, ... 

Answer 1

tôi thêm publicPath đến phần output và nó làm việc, bây giờ các url đi gốc rễ.

output: { 
path: './public', 
filename: 'bundle.js', 
publicPath: '/' 
}, ...