URL-ссылки на изображение SCSS Webpack не работают на вложенных маршрутах

Вот моя структура каталогов:

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

А также:

// 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']
  }
};

А также:

/* 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;
}

При загрузке одноуровневых маршрутов мои ссылки на изображения работают правильно.

Например, в /search ссылка на изображение отображается как url(images/img-75fa3d.png) и работает.

Однако, если я перейду на вложенный маршрут (через React Router), например /properties/1 ссылка на изображение такая же, и не может найти правильного местоположения изображения, так как это относительная ссылка: url(images/img-75fa3d.png).

Изображение из этого примера - logo-b-green.png.

РЕДАКТИРОВАТЬ:

Я добавил publicPath в раздел output, и это сработало, теперь URL-адреса идут в корень. Может ли кто-нибудь подтвердить, что это правильный способ справиться с этим?

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

person Micah    schedule 18.08.2016    source источник
comment
Я собирался предложить установить publicPath, так что да. AFAIK, он используется для префикса URL-адресов к ресурсам.   -  person robertklep    schedule 01.09.2016


Ответы (1)


Я добавил publicPath в раздел output, и это сработало, теперь URL-адреса идут в корень.

output: {
 path: './public',
 filename: 'bundle.js',
 publicPath: '/'
}, ...
person Micah    schedule 01.09.2016