How does CSS refer to pictures? How CSS refers to pictures

How does CSS refer to pictures? What are the steps for CSS to refer to pictures? This article to introduce to you about the CSS reference image method, the need for a friend can refer to, I hope you have some help.

Picture written css:css reference picture

CSS reference picture The first step: Create a new images folder in the SRC directory and put in a picture

CSS reference picture Step two: Insert a chunk in the index.html

Example: <p id= "pic" ></p>

CSS Reference picture step three: Insert the background image for #pic in the CSS directory Index.css

CSS Reference Picture Fourth step: in the terminal input Webpack packaging error, need to configure the terminal Ffile-loader and Url-loader

NPM Install–save-dev File-loader Url-loader

Installation Successful

In Terminal input:

CSS reference Picture Fifth step: In the webpack-config.js inside the ==module== configuration ==url-loader== (Url-loader including File-loader, so no more configuration File-loader)

Modules: such as interpreting CSS, how images are converted, compressing module:{     rules: [         {           test:/\.css$/, use           : [' Style-loader ', ' Css-loader ']         },{            test:/\. (png|jpg|gif)/,            use:[{                loader: ' Url-loader ',                options:{                    limit:500000                }            }]         }       ] },

test:/. (png|jpg|gif)/is a matching picture file suffix name.

Use: Is the configuration parameter that specifies the loader and loader used.

Limit: is the file less than 500000B into the Base64 format, write JS.

CSS Reference picture Sixth step: Re-==webpack== the terminal input for packaging

CSS reference picture Seventh step: NPM run Server for browser preview

Attention:

• [x] Url-loader encapsulates file-loader. Url-loader does not rely on file-loader, that is, when using Url-loader, only need to install Url-loader, do not need to install File-loader, because Url-loader built-in File-loader.

• Url-loader work in two situations:
  

The

• File size is less than the limit parameter, and Url-loader will convert the file to Dataurl (Base64 format);

The

• File size greater than Limit,url-loader calls File-loader for processing, and the parameters are passed directly to File-loader. (In fact, we can only install a url-loader.) But for the convenience of future operation, we will install the file-loader here by the way.

• Does not need to be introduced at the top of the configuration Url-loader, only needs to introduce the plug-in to introduce the webpack-config.js above