How css references pictures
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!
