詳解vue-cil和webpack中本地靜態(tài)圖片的路徑問題解決方案
本文介紹了vue-cil和webpack中本地靜態(tài)圖片的路徑問題解決方案，分享給大家，具體如下：
1 本地圖片動態(tài)綁定img的src屬性
一般我們在html中或者vue組件文件中引用圖片是這樣，這是不需要做特別處理的
我們將圖片放入assets中或者重新建立個文件夾img什么的都可以，隨意～
但是我們這時候可能會有個需求就是我們要動態(tài)綁定一組本地圖片
1 將圖片當成模塊先引進來，再綁定
但是這種做法局限性比較大，模塊化差，代碼不好看 。
如果我做的是純靜態(tài)的網(wǎng)站展示，有許多的本地靜態(tài)資源需要加載，里面包括本地數(shù)據(jù)和本地圖片混合的好幾組，那不是要麻煩死～
1.1 所以我們需要三步
第一步我們在src下面建立一個json文件夾里面放置靜態(tài)的json數(shù)據(jù)
第二步將所有的靜態(tài)圖片資源放在和src同級目錄下的static文件夾下
第三步你的路徑可以寫成自然的'../../static/img/xxx.png' 也可以按照紅框中的寫法（這種寫法對應的是編譯后文件的目錄）
這樣子按照平常的動態(tài)綁定src屬性你的圖片路徑在開發(fā)模式下和生產(chǎn)模式下的圖片資源路徑都是不會出問題的
1.2 小問題
但也有個問題就是這種方式引用圖片是不會被url等加載器處理的
上面的紅框都是這種方式，最下面的紅框是用require的方式將圖片引進來的（被當成模塊被url-loader處理，加入了hash值）
這個需要看網(wǎng)站本身的性質和具體業(yè)務以及個人取舍了，當然也可以混合著用，靈活一點沒有死的處理方法！
2 css中的本地圖片路徑在打包后的問題
你的項目在開發(fā)模式下css中用url（）引用圖片是正常的，但是打包后圖片路徑卻并沒有被處理或者說特別怪異
導致本地圖片資源無法加載，是不是有這樣的困惑？
只需要在原有的一個插件上添加一段代碼即可：
這個插件大家又應該都比較熟悉，就是將css從打包中單獨提取出來作為一個文件夾，上面這個是vue-cil的編譯模板，大家可以根據(jù)這個參考一下
publicPath這個配置屬性的具體其他用法大家可以去官網(wǎng)看看，或者看看源碼。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
使用vue-route 的 beforeEach 實現(xiàn)導航守衛(wèi)(路由跳轉前驗證登錄)功能
在網(wǎng)站中普遍會遇到這樣的需求，路由跳轉前做一些驗證，比如登錄驗證（未登錄去登錄頁）。下面腳本之家小編給大家?guī)砹耸褂胿ue-route 的 beforeEach 實現(xiàn)導航守衛(wèi)(路由跳轉前驗證登錄)功能，感興趣的朋友一起看看吧2018-03-03
element-plus中el-table點擊單行修改背景色方法
這篇文章主要給大家介紹了關于element-plus中el-table點擊單行修改背景色的相關資料,這是產(chǎn)品新加了的一個需求,分享給同樣遇到這個需求的朋友,需要的朋友可以參考下2023-07-07
前端vue如何監(jiān)聽對象或者數(shù)組某個屬性的變化詳解
這篇文章主要給大家介紹了關于前端vue如何監(jiān)聽對象或者數(shù)組某個屬性的變化的相關資料,在Vue中你可以使用watch或者computed來監(jiān)聽對象或數(shù)組某個屬性的變化,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了mpvue寫一個CPASS小程序的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
Element-Plus?el-col、el-row快速布局及使用方法
這篇文章主要介紹了Element-Plus?el-col、el-row快速布局及使用方法,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細介紹了如何封裝一個隨機驗證碼的VUE組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
Vue+Echarts實現(xiàn)繪制多設備狀態(tài)甘特圖
這篇文章主要為大家詳細介紹了Vue如何結合Echarts實現(xiàn)繪制多設備狀態(tài)甘特圖,文中的示例代碼講解詳細,有需要的小伙伴可以跟隨小編一起學習一下2024-03-03
這篇文章主要介紹了Vue3中使用pinia,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
解決vue初始化項目一直停在downloading template的問題
這篇文章主要介紹了解決vue初始化項目一直停在downloading template的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue-DPlayer是一個易于使用、高性能的基于Vue.js的視頻播放器組件,這篇文章將為大家詳細介紹一下vue-dplayer視頻播放器組件的安裝與使用,需要的小伙伴可以參考下2023-09-09