問題復現：
一開始是這樣寫的：
<img :src="'../../assets/'+ item.picUrl +'.png'" />
結果圖片不顯示，控制台報錯404，圖片的加載地址解析為：http://test.hengdaomed.com/assets/doc_chen.png
解決方案：添加require()
<img :src="require('../../assets/'+ item.picUrl +'.png')" />
此時圖片就可以正常顯示，圖片的加載路徑經過webpack編譯后解析為：http://test.hengdaomed.com/pda-fe/static/img/doc_chen.3c27b5b.jpg
原因：
圖片資源是靜態文件，而靜態資源可以用兩種方式進行處理：
1. 在 JS 導入或在 template/CSS 中通過相對路徑被引入。這類引用會被webpack處理。 2. 放置在 static 目錄下或通過絕對路徑被引入(vue-cli3是 public 目錄)。這類資源將會直接被拷貝，而不會被 webpack 處理。
在vue的項目中，webpack使用的是vue-loader，在編譯過程中，所有的資源路徑例如 <img src="...">、background: url(...) 和 @import 會作為模塊依賴。
而動態加載圖片，圖片的地址無法被解析，因此最終沒有被打包到文件中，找不到該圖片。