首先看一個專案

目錄結構：

程式碼如下：

html：

<img src="../../assets/logo.png" alt="">

編譯效果：

是不是圖片顯示出來了，但是如果我的圖片路徑是寫到data裡面的，在img上面，繫結一個data的資料，那麼是不是圖片載入不出來？但是圖片的路徑還是有的？如下效果：

程式碼如下：

html：

<img :src="imgUrl" alt="">

<img src="{{ imgUrl }}"/>  //錯誤寫法

<p>{{imgUrl}}</p>

不過，有時候即使使用了正確的語法，依舊無法顯示圖片，找了好幾次程式碼，依然無法發現錯誤。原因是你的imgUrl使用了本地圖片的路徑。

既然找不到，我們去build資料夾下，看目錄結構：

是不是說只要把url改成./static/img/logo.png就可以了呢？依然是不行的。開啟img資料夾我們可以發現，所有的檔名後都被新增上了一個隨機字串，原始的檔名已經無法對應了。

那麼，到底應該怎麼載入本地圖片呢？回頭看vue-cli的檔案結構，發現其中有一個叫做static的資料夾，嘗試將logo.png放入這個資料夾，然後修改imgUrl：

程式碼如下：

html：

<img style="width:200px;" :src="imgUrl" alt="">

js：

imgUrl: '../../../static/img/test.jpg'

效果如下：

成功讀取到了test.jpg，執行npm run build後檢視dist檔案，發現test.jpg.原封不動地放在了根目錄下。

原來，之前的目錄結構是有問題的，圖片一類的靜態檔案，應該放在這個static資料夾下，這個資料夾下的檔案（夾）會按照原本的結構放在網站根目錄下。這時我們再去使用/static絕對路徑，就可以訪問這些靜態檔案了。