欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決vue打包之后靜態(tài)資源圖片失效的問題

 更新時間:2018年02月21日 21:17:22   作者:jmin_coming  
下面小編就為大家分享一篇解決vue打包之后靜態(tài)資源圖片失效的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧

1、問題描述

在項(xiàng)目開發(fā)中,當(dāng)我們通過npm run build打包之后將文件放在服務(wù)器上時通常會出現(xiàn)圖片失效問題,控制臺中提示某個圖片沒有找到(404錯誤),這些圖片可以是以src引入的圖片, 也可以是css中定義的背景圖片。圖片能否顯示與你的靜態(tài)資源文件存在位置和引入的路徑直接相關(guān),下面是我的其中一個項(xiàng)目的文件存放以及路徑書寫方式!

2、解決方法之一

靜態(tài)資源static存放位置放在src目錄下

 

你可能會問為什么放在src目錄下?放在跟src同級目錄下不可以嗎?好吧,一開始我也是放在src同級目錄下,但是在某個css文件中引入背景圖片的時候打包之后圖片失效,我是這樣引入的

 

實(shí)踐證明這個寫法是錯誤的,這個會在你打包的時候直接抱一大堆錯(如css-loader錯誤),連項(xiàng)目都跑不起來。

于是我用下面的寫法:

 

這種寫法也是不可以的,原因是你的靜態(tài)資源文件static不在src目錄,而在vue中src目錄是相對根目錄是src目錄,所以如果你想用上面的寫法,必須要把static放在src目錄下。如上面圖一圖二

注意:不能把static/images/user.png寫成 /static/images/user.png,否則圖片還是失效。

以上是關(guān)于文件存放位置以及css中引入圖片問題,如果是通過img標(biāo)簽引入圖片的話,相對簡單,直接寫絕對地址就行了,并且靜態(tài)資源static文件夾的位置可以在src里面,也可以放在與src同級下,但是為了不出現(xiàn)上面情況,放在src里面即可!

img引入圖片:

 

以上是一種解決圖片失效問題的方法,當(dāng)然,如果非要把static靜態(tài)資源目錄放在與src同級目錄下,也是有解決方法,例如通過導(dǎo)入圖片的方式(本人未實(shí)踐),可以自行嘗試!

這篇解決vue打包之后靜態(tài)資源圖片失效的問題就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • 詳解vue2.0模擬后臺json數(shù)據(jù)

    詳解vue2.0模擬后臺json數(shù)據(jù)

    這篇文章主要介紹了vue2.0模擬后臺json數(shù)據(jù),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • vue-router傳參的4種方式超詳細(xì)講解

    vue-router傳參的4種方式超詳細(xì)講解

    我們在組件切換時經(jīng)常會有傳遞一些數(shù)據(jù)的需求,這樣就涉及到了路由傳參的問題,下面這篇文章主要給大家介紹了關(guān)于vue-router傳參的4種超詳細(xì)方式,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-07-07
  • 基于Vue.js實(shí)現(xiàn)簡潔的多屏切換效果

    基于Vue.js實(shí)現(xiàn)簡潔的多屏切換效果

    在實(shí)際開發(fā)中,多屏切換是常見的需求,尤其是在需要展示大量內(nèi)容或信息時,下面我將向大家展示我是如何實(shí)現(xiàn)三屏,并通過動態(tài)按鈕控制切換屏幕的,感興趣的小伙伴跟著小編一起來看看吧
    2024-09-09
  • Vue.js桌面端自定義滾動條組件之美化滾動條VScroll

    Vue.js桌面端自定義滾動條組件之美化滾動條VScroll

    這篇文章主要給大家介紹了關(guān)于Vue.js桌面端自定義滾動條組件之美化滾動條VScroll的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-12-12
  • vue中輸入框事件的使用及數(shù)值校驗(yàn)方式

    vue中輸入框事件的使用及數(shù)值校驗(yàn)方式

    這篇文章主要介紹了vue中輸入框事件的使用及數(shù)值校驗(yàn)方式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • Vue 兩個字段聯(lián)合校驗(yàn)之修改密碼功能的實(shí)現(xiàn)

    Vue 兩個字段聯(lián)合校驗(yàn)之修改密碼功能的實(shí)現(xiàn)

    本文以校驗(yàn)兩次密碼的一致性應(yīng)用,給出兩個可變屬性值的字段之間的聯(lián)合校驗(yàn)的典型解決方案,通過實(shí)例代碼給大家介紹Vue 兩個字段聯(lián)合校驗(yàn)之修改密碼功能的實(shí)現(xiàn),需要的朋友一起看看吧
    2021-07-07
  • vue3中的ref、reactive問題解析

    vue3中的ref、reactive問題解析

    ref 和 reactive都是vue3推出的針對組合式設(shè)計(jì)的聲明響應(yīng)式狀態(tài)的API,兩者在使用之前都要先進(jìn)行引入,本文通過實(shí)例代碼詳解vue3中的ref、reactive問題,感興趣的朋友一起看看吧
    2024-03-03
  • 在Vue中使用WebScoket?會怎么樣?

    在Vue中使用WebScoket?會怎么樣?

    這篇文章主要介紹了在Vue中使用WebScoket,網(wǎng)絡(luò)的不穩(wěn)定而斷開連接,webscoket不會出現(xiàn)異常,下面就一起進(jìn)入文章看看吧
    2022-01-01
  • 詳解element-ui級聯(lián)菜單(城市三級聯(lián)動菜單)和回顯問題

    詳解element-ui級聯(lián)菜單(城市三級聯(lián)動菜單)和回顯問題

    這篇文章主要介紹了詳解element-ui級聯(lián)菜單(城市三級聯(lián)動菜單)和回顯問題,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-10-10
  • Vue項(xiàng)目build后,圖片加載不出來的解決

    Vue項(xiàng)目build后,圖片加載不出來的解決

    這篇文章主要介紹了Vue項(xiàng)目build后,圖片加載不出來的解決,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-03-03

最新評論