這篇文章帶給大家的內容是關於vue-cli腳手架如何引入圖片（程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
#1、import方法
第一步：在.vue檔案中import edit from 'path'（path是圖片與.vue的相對路徑）
第二步：在data物件中定義一個屬性edits，值對應edit
#第三個步驟：在template中 給標籤綁定屬性
最後刷新介面看效果就可以了！
2、static方法
第一步：圖片放在static資料夾，在data物件的一個裡定義屬性pro_img,屬性值是圖片與.vue的相對路徑
第二步：在template中 給標籤綁定屬性
#刷新看效果
解決vue元件css中背景圖片路徑報錯問題前提是你用了vue-cil，那麼在build目錄下找到utils.js中的ExtractTextPlugin.extract({}),裡面添加下面這個屬性就完美解決了publicPath: '.. /../'
解釋
檔案最終會打包壓縮為js。當運行的時候，css中的相對路徑指向已經發生變化指向了根目錄，所以出現載入錯誤的問題。
下面是這個外掛的解釋。
extract-text-webpack-plugin
作用：該外掛程式的主要是為了抽離css樣式,防止將樣式打包在js中引起頁面樣式載入錯亂的現象。
外掛程式參數：外掛程式有三個參數意義分別如下：
use:指需要什麼樣的loader去編譯檔,這裡由於原始檔是.css所以選擇css-loader
fallback:編譯後用什麼loader來提取css檔案
publicfile:用來覆寫專案路徑,產生該css檔案的檔案路徑
相關推薦：
以上是vue-cli腳手架如何引入圖片（代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
