vue-cli腳手架引入圖片的幾種方法總結(jié)
我個人常用的方法，一直在摸索更好的方法，如果各位大佬有什么建議，可以給我評論留言哦
1、import方法
第一步：在.vue文件中import edit from 'path'（path是圖片與.vue的相對路徑）
第二步：在data對象中定義一個屬性edits，值對應(yīng)edit
第三步：在template中 給標簽綁定屬性
最后刷新界面看效果就可以了！
2、static方法
第一步：圖片放在static文件夾，在data對象的一個里定義屬性pro_img,屬性值是圖片與.vue的相對路徑
第二步：在template中 給標簽綁定屬性
刷新看效果
解決vue組件css中背景圖片路徑報錯問題
前提是你用了vue-cil，那么在build目錄下找到utils.js中的ExtractTextPlugin.extract({}),里面添加下面這個屬性就完美解決了publicPath: '../../'
解釋
文件最終會打包壓縮為js。當運行的時候，css中的相對路徑指向已經(jīng)發(fā)生變化指向了根目錄，所以出現(xiàn)加載錯誤的問題。
下面是這個插件的解釋。
extract-text-webpack-plugin
作用：該插件的主要是為了抽離css樣式,防止將樣式打包在js中引起頁面樣式加載錯亂的現(xiàn)象。
插件參數(shù)：該插件有三個參數(shù)意義分別如下：
use: 指需要什么樣的loader去編譯文件,這里由于源文件是.css所以選擇css-loader
fallback: 編譯后用什么loader來提取css文件
publicfile: 用來覆蓋項目路徑,生成該css文件的文件路徑
以上這篇vue-cli腳手架引入圖片的幾種方法總結(jié)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue-cli3配置與跨域處理方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了Vue前端實現(xiàn)導出頁面為word的兩種方法,文中通過代碼示例和圖文介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了vue-for循環(huán)嵌套操作,結(jié)合實例形式分析了vue.js使用for循環(huán)嵌套讀取數(shù)據(jù)相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
組件是Vue.js最強大的功能之一,組件可以擴展HTML元素,封裝可重用的代碼,下面這篇文章主要給大家介紹了關(guān)于vue如何動態(tài)加載組件的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要給大家介紹了關(guān)于vue3使用百度地圖的相關(guān)資料,最近一個項目要用到地圖，因為微信小程序用的也是百度地圖，所以想著網(wǎng)頁端也用百度地圖,需要的朋友可以參考下2023-07-07
vue中v-for數(shù)據(jù)狀態(tài)值變了,但是視圖沒改變的解決方案
這篇文章主要介紹了vue中v-for數(shù)據(jù)狀態(tài)值變了，但是視圖沒改變的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
本文通過實例代碼給大家介紹了Vuejs中的watch，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2020-01-01
vue事件監(jiān)聽函數(shù)on中的this指針域使用
這篇文章主要介紹了vue事件監(jiān)聽函數(shù)on中的this指針域使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue + el-tree 實現(xiàn)插入節(jié)點自定義名稱數(shù)據(jù)的代碼
這篇文章主要介紹了vue + el-tree 實現(xiàn)插入節(jié)點自定義名稱數(shù)據(jù)的代碼,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
vue實現(xiàn)錨點跳轉(zhuǎn)及滾動監(jiān)聽的方法
這篇文章主要為大家詳細介紹了vue實現(xiàn)錨點跳轉(zhuǎn)及滾動監(jiān)聽的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07