webpack中，css中打包背景圖，路徑報錯

css-loader：

            //打包樣式中背景圖
            {
                test: /\.(png|jpg)$/,
                loader: "url-loader?limit=8192&name=images/[hash:8].[name].[ext]"
                //limit參數，代表如果小於大約4k則會自動幫你壓縮成base64編碼的圖片,否則拷貝文件到生產目錄
                //name后面是打包后的路徑；
                //loader 后面 limit 字段代表圖片打包限制，這個限制並不是說超過了就不能打包，而是指當圖片大小小於限制時會自動轉成 base64 碼引用
                //上例中大於8192字節的圖片正常打包，小於8192字節的圖片以 base64 的方式引用。
            },

當小於8192，就打包成base64，那么，大於的就不做處理；

 

情景：我在main.css中背景圖：

.page4-bg{
  background:url("../images/page4-bg.jpg") no-repeat center;
  background-size:cover;
}

 

結果：打包的時候，圖片是在dist/images/文件夾下的，但是控制台中卻是：

 

圖片沒有找到，於是我去查看路徑：

 

貌似圖片是加載進來了，好像沒什么問題，接着在圖片地址上鼠標右擊---open in new tab，結果

 

而我文件圖片的目錄地址是

這樣的，去掉路徑中的css，就能夠顯示圖片了

 

解決方案：

            //打包樣式中背景圖
            {
                test: /\.(png|jpg)$/,
                loader: "url-loader?limit=8192&name=images/[hash:8].[name].[ext]",
                options:{
                    publicPath:'./images'
                }
                //limit參數，代表如果小於大約4k則會自動幫你壓縮成base64編碼的圖片,否則拷貝文件到生產目錄
                //name后面是打包后的路徑；
                //loader 后面 limit 字段代表圖片打包限制，這個限制並不是說超過了就不能打包，而是指當圖片大小小於限制時會自動轉成 base64 碼引用
                //上例中大於8192字節的圖片正常打包，小於8192字節的圖片以 base64 的方式引用。
            },

添加publicPath。

這個問題困擾了我一天，終於在第二天的下午找到了方法。