Broken image in vue style with webpack

Question

This is the style

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

I expect it to load the mountain image, but instead it gives nothing. The style is at myproject/src/components/Header.vue, and the image is at myproject/img/mountain.jpg

This is my webpack loader config

    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
        }
      }
    ]
  }

And the console seems fine.. No error is logged. But, the image is not loaded. It's broken image.
Please help