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