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