vue-cli脚手架下，图片路径使用变量？

Question

1.问题

使用vue-cli的webpack模版做脚手架。页面中某区域的内容被作为组件，在 instruction.vue中进行编写，它包括3个格式相同、内容不同的区块，我希望用把里面各自不同的文字、图片路径放到js代码中，剩余部分借助v-for来处理，节省代码，同时逻辑更清晰。

目前效果为：

我的问题是：我的文字都正常，我的图都挂了：我把图像路径写在.vue文件的<script></script>中了，如果写死在<template></template>区域，则正常显示:

但是硬编码的效果不是我要的，我希望显示不同的图片。

2.代码

这里是我的.vue文件代码,里面用到了少许bootstrap（外部有相应饮用这里不用担心）:

<template>
  
  <div class="row">
    <div class="col-md-4" v-for="item in instrus">
      <h2><img :src="'../assets/'+item.imgsrc"> {{item.title}}</h2>
      <p>{{item.text}}</p>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      instrus:[
        {
          title:'标题1',
          imgsrc: 'pic1.png',
          text:'这是第一段文字',
        },
        {
          title:'标题1',
          imgsrc: 'pic2.png',
          text:'这是第一段文字',
        },
        {
          title:'标题1',
          imgsrc: 'pic3.png',
          text:'这是第一段文字',
        },
      ]
    }
  }
}
</script>

<style>
</style>

3.报错信息&&截图

以及，当前.vue文件和相应的文件目录：

各种配置都是用vue init webpack my-project默认来的。

4.备注

希望提供具体的做法，比如改webpack的配置文件，或者改文件路径，或者改图片路径变量的赋值，谢谢。

Answer 1

url-loader无法解析js动态生成的路径。
参考这个：
http://segmentfault.com/q/101...

Answer 2

src=~assets/xxxx.png

Answer 3

配置开发服务器提供静态资源服务呀。例如，在 https://github.com/kenberkeley/vue-demo/blob/master/build/dev-server.js 里面，用的是 express 的 static 提供静态资源服务