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