詳解vue-cil和webpack中本地靜態(tài)圖片的路徑問(wèn)題解決方案
本文介紹了vue-cil和webpack中本地靜態(tài)圖片的路徑問(wèn)題解決方案，分享給大家，具體如下：
1 本地圖片動(dòng)態(tài)綁定img的src屬性
一般我們?cè)趆tml中或者vue組件文件中引用圖片是這樣，這是不需要做特別處理的
我們將圖片放入assets中或者重新建立個(gè)文件夾img什么的都可以，隨意～
但是我們這時(shí)候可能會(huì)有個(gè)需求就是我們要?jiǎng)討B(tài)綁定一組本地圖片
1 將圖片當(dāng)成模塊先引進(jìn)來(lái)，再綁定
但是這種做法局限性比較大，模塊化差，代碼不好看 。
如果我做的是純靜態(tài)的網(wǎng)站展示，有許多的本地靜態(tài)資源需要加載，里面包括本地?cái)?shù)據(jù)和本地圖片混合的好幾組，那不是要麻煩死～
1.1 所以我們需要三步
第一步我們?cè)趕rc下面建立一個(gè)json文件夾里面放置靜態(tài)的json數(shù)據(jù)
第二步將所有的靜態(tài)圖片資源放在和src同級(jí)目錄下的static文件夾下
第三步你的路徑可以寫(xiě)成自然的'../../static/img/xxx.png' 也可以按照紅框中的寫(xiě)法（這種寫(xiě)法對(duì)應(yīng)的是編譯后文件的目錄）
這樣子按照平常的動(dòng)態(tài)綁定src屬性你的圖片路徑在開(kāi)發(fā)模式下和生產(chǎn)模式下的圖片資源路徑都是不會(huì)出問(wèn)題的
1.2 小問(wèn)題
但也有個(gè)問(wèn)題就是這種方式引用圖片是不會(huì)被url等加載器處理的
上面的紅框都是這種方式，最下面的紅框是用require的方式將圖片引進(jìn)來(lái)的（被當(dāng)成模塊被url-loader處理，加入了hash值）
這個(gè)需要看網(wǎng)站本身的性質(zhì)和具體業(yè)務(wù)以及個(gè)人取舍了，當(dāng)然也可以混合著用，靈活一點(diǎn)沒(méi)有死的處理方法！
2 css中的本地圖片路徑在打包后的問(wèn)題
你的項(xiàng)目在開(kāi)發(fā)模式下css中用url（）引用圖片是正常的，但是打包后圖片路徑卻并沒(méi)有被處理或者說(shuō)特別怪異
導(dǎo)致本地圖片資源無(wú)法加載，是不是有這樣的困惑？
只需要在原有的一個(gè)插件上添加一段代碼即可：
這個(gè)插件大家又應(yīng)該都比較熟悉，就是將css從打包中單獨(dú)提取出來(lái)作為一個(gè)文件夾，上面這個(gè)是vue-cil的編譯模板，大家可以根據(jù)這個(gè)參考一下
publicPath這個(gè)配置屬性的具體其他用法大家可以去官網(wǎng)看看，或者看看源碼。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了elementUI中MENU菜單踩坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章給大家介紹了vue封裝公共方法的實(shí)現(xiàn),文章中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了基于vue實(shí)現(xiàn)微博三方登錄流程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11
vue實(shí)現(xiàn)折線(xiàn)圖 可按時(shí)間查詢(xún)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)折線(xiàn)圖，可按時(shí)間查詢(xún)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
vue中輕量級(jí)模糊查詢(xún)fuse.js使用方法步驟
這篇文章主要給大家介紹了關(guān)于vue中輕量級(jí)模糊查詢(xún)fuse.js使用方法的相關(guān)資料,Fuse.js是一個(gè)功能強(qiáng)大、輕量級(jí)的模糊搜索庫(kù),通過(guò)提供簡(jiǎn)單的?api?調(diào)用,達(dá)到強(qiáng)大的模糊搜索效果,需要的朋友可以參考下2024-01-01
vue自定義組件(通過(guò)Vue.use()來(lái)使用)即install的用法說(shuō)明
這篇文章主要介紹了vue自定義組件(通過(guò)Vue.use()來(lái)使用)即install的用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
這篇文章主要介紹了vue如何循環(huán)給對(duì)象賦值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了配置一個(gè)vue3.0項(xiàng)目的完整步驟，從0開(kāi)始配置一個(gè)vue項(xiàng)目，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
這篇文章主要介紹了vue使用canvas手寫(xiě)輸入識(shí)別中文，工作時(shí)遇到一些項(xiàng)目如：系統(tǒng)上的輸入法使用不方便，客戶(hù)要求做一個(gè)嵌入web網(wǎng)頁(yè)的手寫(xiě)輸入法。下面我們來(lái)看看文章得具體描述吧2021-11-11
VueX瀏覽器刷新如何實(shí)現(xiàn)保存數(shù)據(jù)
這篇文章主要介紹了VueX瀏覽器刷新如何實(shí)現(xiàn)保存數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07