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

1.问题 

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

但是：图片显示不出来 


2.代码 


这里是我的.vue文件代码： 
<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> 



报错信息&&截图 



 

一直报404的错误，应该是webpack没有找到图片。如果代码改为以下这种格式就没有问题 


 instrus:[ 


{ 
          title:'标题1', 
          imgsrc: require('pic1.png'), 

text:'这是第一段文字', 

}, 

参考：https://segmentfault.com/q/1010000006768193 

https://segmentfault.com/q/1010000006743502