Vue中img標籤src屬性綁定

最近剛剛完成了本身的畢業設計項目，整理一下過程當中遇到的問題吧~~~

我作的是一個基於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')