Shulou(Shulou.com)06/01 Report--

Editor to share with you how css quotes pictures, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Css reference Picture step 1: create a new images folder under the src directory and put a picture in it

Css reference picture step 2: insert a block in the index.html

For example:

Css reference picture step 3: insert a background image for # pic in index.css under the css directory

Css reference picture step 4: enter webpack in the terminal to report an error. You need to configure ffile-loader and url-loader on the terminal.

Npminstall-save-devfile-loaderurl-loader

Installation succeeded

At the terminal, enter:

Css reference picture step 5: configure url-loader== in = = module== in webpack-config.js (url-loader includes file-loader, so you no longer need to configure file-loader)

/ / module: for example, interpreting CSS, how to convert images, and 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 the suffix name of the matching picture file.

Use: is the configuration parameter for the loader and loader specified to be used.

Limit: files less than 500000B are typed into Base64 format and written into JS.

Css quotes the picture step 6: enter = = webpack== at the terminal for packaging

Css reference picture step 7: npmrunserver for browser preview

Note:

[X] url-loader encapsulates file-loader. Url-loader does not depend on file-loader, even if you use url-loader, you only need to install url-loader, not file-loader, because url-loader has built-in file-loader.

There are two types of url-loader work:

If the file size is less than the limit parameter, url-loader will convert the file to DataURL (Base64 format)

If the file size is greater than limit,url-loader, file-loader is called for processing, and the parameters are passed directly to file-loader. In fact, we only need to install one url-loader. But for the convenience of operation in the future, we will install file-loader here by the way. )

When configuring url-loader, you don't need to introduce it above, only if you want to introduce a plug-in, you need to introduce it on webpack-config.js.

The above is all the content of the article "how to quote pictures from css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.