webpack打包后图片显示问题
1、先解釋一下這段配置代碼的意思，test是正則匹配規(guī)則，匹配項(xiàng)目中所有的以正則規(guī)則結(jié)尾的格式的文件，然后通過url-loader進(jìn)行處理，不大于10kb就會(huì)進(jìn)行base64轉(zhuǎn)碼，就是將圖片轉(zhuǎn)為base65格式，如果超過10KB的圖片就單獨(dú)打包到utils.assetsPath(‘img/[name].[hash:7].[ext]’) 這個(gè)目錄下，也就是static/img/圖片名，
2、注意相對路徑標(biāo)識(shí)’./’,我們知道img為html標(biāo)簽，他的路徑是由index.html開始訪問的，他走./static/img/'圖片名'是能正確訪問到圖片的，所以img的路徑?jīng)]問題，然后app.css訪問./static/img/'圖片名'是訪問錯(cuò)誤的，因?yàn)樵赾ss目錄下并沒有static目錄。這樣就造成了路徑訪問失敗的問題。（這就是背景圖片沒有顯示的原因）
3、解決方法：
檢查config文件中的assetsPublicPath是否設(shè)置為’/’而不是’./’?
注意區(qū)分’/’為絕對路徑，絕對路徑從網(wǎng)站靜態(tài)服務(wù)器根目錄查詢/static/img/圖片，這樣的路徑就是正確的，如果設(shè)置為’./’，路徑就變成了相對路徑，相對路徑會(huì)根據(jù)相對的文件目錄來確定文件資源，會(huì)造成上面分析的問題
vue-cli創(chuàng)建的vue項(xiàng)目，會(huì)自帶一個(gè)static目錄，將出錯(cuò)圖片放在該目錄下面即可（正確解決辦法）?
查看vue-cli創(chuàng)建項(xiàng)目的webpack配置文件可以找到一個(gè)將static目錄拷貝到dist目錄中。根據(jù)對資源的規(guī)劃不同，將需要打包的資源放在src/assets目錄中，不需要打包的資源放入static目錄中。
背景圖片的解決方法：background:url('../../assets/images/bg.png');被相對打包后變成了url('static/img/bg.png')所以我們必須保留css引用圖片的正確路徑即：url('../../static/img/bg.338948.png')? 我們需要在build文件夾下的utils.js做一下修改添加這一行代碼即可。
關(guān)于base64
優(yōu)點(diǎn)：base64就是一串字符串碼來表示的圖片，在加載頁面或者js的時(shí)候就一并加載過來，減少圖片引用時(shí)單獨(dú)的一次http請求。了解web端性能優(yōu)化的同學(xué)都知道，http請求每次建立都會(huì)占用一定的時(shí)間，對于小圖請求來說，可能http建立請求的時(shí)間比圖片下載本身還長。所以對小圖進(jìn)行base64轉(zhuǎn)碼是優(yōu)化http請求，保證頁面加速渲染的一種手段。
缺點(diǎn)：base64缺點(diǎn)就是之前提到的，他會(huì)增加圖片本身的大小，對小圖片來說，增加大小導(dǎo)致js的請求增長完全能彌補(bǔ)多一個(gè)http請求的建立的時(shí)長，這種取舍是劃算的。可是對于大圖來說，這樣的取舍是不劃算的。
總結(jié)
以上是生活随笔為你收集整理的webpack打包后图片显示问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 新增功能！Trello个人应用程序登陆
- 下一篇： 终于收到HacktoberFest的奖品