vue-cli構建項目imgsrc動態路徑打包找不到路徑資源

處理靜態資源
靜態資源可以通過兩種方式進行處理：

在 JavaScript 被導入或在 template/CSS 中通過相對路徑被引用。這類引用會被 webpack 處理。

放置在 public 目錄下或通過絕對路徑被引用。這類資源將會直接被拷貝，而不會經過 webpack 的處理

從相對路徑導入
當你在 JavaScript、CSS 或 *.vue 文件中使用相對路徑 (必須以 . 開頭) 引用一個靜態資源時，該資源將會被包含進入 webpack 的依賴圖中。在其編譯過程中，所有諸如 、background: url(…) 和 CSS @import 的資源 URL 都會被解析爲一個模塊依賴。
例如，url(./image.png) 會被翻譯爲 require(’./image.png’)，而：

<img src="./image.png">
//將會被編譯到：

h('img', { attrs: { src: require('./image.png') }})

URL 轉換規則
如果 URL 是一個絕對路徑 (例如 /images/foo.png)，它將會被保留不變。

如果 URL 以 . 開頭，它會作爲一個相對模塊請求被解釋且基於你的文件系統中的目錄結構進行解析。

如果 URL 以 ~ 開頭，其後的任何內容都會作爲一個模塊請求被解析。這意味着你甚至可以引用 Node 模塊中的資源：

<img src="~some-npm-package/foo.png">

如果 URL 以 @ 開頭，它也會作爲一個模塊請求被解析。它的用處在於 Vue CLI 默認會設置一個指向 /src 的別名 @。(僅作用於模版中)
public 文件夾
任何放置在 public 文件夾的靜態資源都會被簡單的複製，而不經過 webpack。你需要通過絕對路徑來引用它們。