Разбитое изображение в стиле Vue с веб-пакетом

Question

Это стиль

<style scoped>
    section.hero {
        background-image: url('../../img/mountain.jpg');
        height: 400px;
    }
</style>

Я ожидаю, что это загрузит изображение горы, но вместо этого это ничего не дает. Стиль в myproject/src/components/Header.vueи изображение в myproject/img/mountain.jpg

Это мой конфиг загрузчика webpack

    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
      loaders: {
        // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
        // the "scss" and "sass" values for the lang attribute to the right configs here.
        // other preprocessors should work out of the box, no loader config like this necessary.
        'scss': 'vue-style-loader!css-loader!sass-loader',
        'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
      }
      // other vue-loader options go here
    }
  },
  {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/
  },
  {
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'file-loader',
    options: {
      name: '[name].[ext]?[hash]'
    }
  },
  {
    test: /\.css$/,
    use: [ 'style-loader', 'css-loader' ]
  },
  {
    test: /\.(png|jpg|gif)$/,
    use: [
      {
        loader: 'url-loader',
        options: {
          limit: 8192
        }
      }
    ]
  }

И консоль, кажется, в порядке.. Никаких ошибок не регистрируется. Но изображение не загружается. Это сломанное изображение.
Пожалуйста помоги