vue-cli腳手架如何引入圖片（代碼）

這篇文章帶給大家的內容是關於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腳手架初始化如何使用

圖文解析如何使用vue-cli腳手架

以上是vue-cli腳手架如何引入圖片（代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！