最近剛剛完成了自己的畢業設計項目，整理一下過程中遇到的問題吧~~~
我做的是一個基於Vue的信息資訊展示與管理平台，顯示首頁、詳情頁等的文章內容時就涉及到了圖片展示，項目初始時我搭建的是靜態網頁結構，這時的圖片是可以正常顯示的，但是能夠通過axios發送請求獲取數據后，想通過 :src 的方式綁定圖片路徑是卻失敗了，於是我查詢了一些相關文章，找到了解決的辦法。
靜態結構時的代碼，圖片可以正常顯示：
<img src="../../../src/static/font/arrow0-0.png" alt="">
數據綁定時候的代碼，圖片無法顯示：
<img :src="item.article_file" alt=""> // 數據庫表中article_file中存儲的值的格式為‘../../../src/static/font/arrow0-0.png’
解決上面的問題有兩種方式：
1.使用絕對路徑
我發現目錄結構是有問題的，回頭看vue-cli的文件結構，發現其中有一個叫做static的文件夾。圖片一類的靜態文件，應該放在這個static文件夾下，這個文件夾下的文件（夾）會按照原本的結構放在網站根目錄下。這時我們再去使用/static絕對路徑，就可以訪問這些靜態文件了。
所以，我將圖片這種靜態資源文件放到了static目錄下，然后將服務器返回的數據在渲染到頁面前進行修改。代碼如下：
這時就發現，圖片成功地渲染到了頁面上，目標達成。
2.使用 require() 包裹相對路徑
html部分：
<img :src="imgUrl"/>
js部分：
imgUrl = require('./assets/logo.png')