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