Webpack, CSS Packaging background map, path error

Css-loader:

 //  packaging style in background map   {test: /\. (png|jpg) $/  " url-loader?limit=8192&name=images/[hash:8". [Name]. [Ext]                  " // limit parameter, which means that if less than approximately 4k will automatically compress you into a base64 encoded picture, otherwise copy the file to the production directory  // name followed by a packaged path;  // loader after the Limit field represents the picture packaging restrictions, this limit does not mean that more than can not be packaged, but that when the picture size is less than the limit will automatically turn to Base64 code reference //             },

When less than 8192, packaging into Base64, then, greater than the treatment;

Scenario: My background in main.css:

. PAGE4-BG {  background:URL (".. /images/page4-bg.jpg ") No-repeat center;   background-size:cover;}

Result: The picture is under the Dist/images/folder when packaged, but the console is:

The picture was not found, so I went to view the path:

Looks like the picture is loaded in, as if there is no problem, and then the image address of the mouse right-click---Open in the new tab, the result

and the directory address of my file picture is

This way, removing the CSS from the path will show the image.

Solution:

            //package style in the background map{test:/\. (png|jpg) $/, Loader:[Url-loader?limit=8192&name=images/[hash:8]. [Name]. [Ext] ", options:{Publicpath:'./images '                }                //The limit parameter, which means that if less than about 4k will automatically compress you into a base64 encoded picture, otherwise copy the file to the production directory                //name is followed by the packaged path;                //the Limit field behind the loader represents the picture packing limit, which does not mean that it cannot be packaged, but that it automatically turns into a base64 code reference when the image size is less than the limit .                //images larger than 8192 bytes in the above example are packaged properly, and images smaller than 8192 bytes are referenced in base64 manner. },

Add Publicpath.

The question bothered me one day and finally found the way in the afternoon of the next day.

Webpack, CSS Packaging background map, path error