title: image src get 404 error with vuejs
body: <p>I'm new to vue.js, and trying to render a list of images using <code>v-for</code> directive. Instead, I get <code>the server responded with a status of 404 (Not Found)</code>. I'm using the <a href="https://github.com/vuejs-templates/webpack" rel="nofollow">template</a> generated by <a href="https://github.com/vuejs/vue-cli" rel="nofollow">vue-cli</a>.</p>
  
  <p>The webpack url-loader  should change the url of the image corresponding to <code>item.src</code> to some <code>[name].[ext]?[hash]</code> format, but it simply leave them alone (actually the result url is <code>http://localhost:8080/assets/computer.jpg</code> ).</p>
  
  <p>And here's my code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;h2 class="ui header"&gt;
    &lt;div class="content"&gt;
     Recent Research
     &lt;div class="sub header"&gt;
      recent research issue
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/h2&gt;
    &lt;div v-for="item in items" class="ui three column centered grid"&gt;
      &lt;div class="column"&gt;
        &lt;img class="ui centered medium image" :src="item.src" /&gt;
        &lt;h3 class="ui header"&gt;{{item.text}}&lt;/h3&gt;
        &lt;p class="teal meta"&gt;{{item.extra}}&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export
    default {
      data() {
        return {
          items: [{
              src: '../assets/computer.jpg',
              text: 'fundamentals of search engine',
              extra: 'with Google'
            }, {
              src: '../assets/computer.jpg',
              text: 'fundamentals of search engine',
              extra: 'with Google'
            }, {
              src: '../assets/computer.jpg',
              text: 'fundamentals of search engine',
              extra: 'with Google'
            }, {
              src: '../assets/computer.jpg',
              text: 'fundamentals of search engine',
              extra: 'with Google'
            }, {
              src: '../assets/computer.jpg',
              text: 'fundamentals of search engine',
              extra: 'with Google'
            }, {
              src: '../assets/computer.jpg',
              text: 'fundamentals of search engine',
              extra: 'with Google'
            },
  
          ]
        }
      }
    }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And the related webpack config.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var path = require('path')
  
  module.exports = {
    entry: {
      app: './src/main.js'
    },
    output: {
      path: path.resolve(__dirname, '../dist/static'),
      publicPath: '/static/',
      filename: '[name].js'
    },
    resolve: {
      extensions: ['', '.js', '.vue'],
      alias: {
        'src': path.resolve(__dirname, '../src')
      }
    },
    resolveLoader: {
      root: path.join(__dirname, 'node_modules'),
    },
    module: {
      loaders: [{
        test: /\.vue$/,
        loader: 'vue'
      }, {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/
      }, {
        test: /\.json$/,
        loader: 'json'
      }, {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: '[name].[ext]?[hash]'
        }
      }]
    },
    vue: {
      loaders: {
        js: 'babel'
      }
    }
    /*
    eslint: {
      formatter: require('eslint-friendly-formatter')
    }
    */
  }</code></pre>
  </div>
  </div>
  </p>