background
How to deal with static resources in vue project (webpack build project)? This sentence seems simple, but the coverage of static resources is very wide. For example: pictures, icons, fonts, js files, etc., are all static resources. In engineering front-end projects, they are handled in different ways. For example, for pictures, in the past, the front-end project may directly refer to the image address, but in the engineered front-end project, all the code will be compiled and processed by packaging and building tools such as webpack or gulp, and the referenced path will occur after compilation. At the same time, it is also possible to perform special processing on image files, such as converting them to base64 format.
Not long ago, when I was helping my colleagues to solve the problem, I encountered the problem that the image loading did not display in the vue project. And I saw that the loading of image resources in the browser console is normal, there is no error or 404, that is, the path is fine, but the image is not displayed. Open a new tab to access the image path, and the page displays a blank small checkered. As shown in the figure below: 
open the console to view the path of the image loading, the image loading is no problem:
during the period, I tried to write background:url in the css style, and also tried to reference the image with require in the style inline style, and the results were the same . It can be judged here that this problem has nothing to do with the way of use. Then there is only a problem when the picture is loaded.
For other projects, you can refer to your webpack configuration (for non-webpack projects, refer to the corresponding configuration). This is a vue project, and I directly look at the configuration of static resources in vue.config.js. As shown in the figure below: As
you can see from the code, the project uses url-loader and file-loader, and the two loaders process image resources such as png, jpg, and gif. Then what are url-loader and file-loader, let's talk about it in detail.
Why do you need url-loader and file-loader?
As mentioned above, when referencing static files, after the project is started or packaged and compiled, the real path of the resource may be different from the one before compilation, which may cause the image to fail to load. Then url-loader and file-loader can help us solve this problem very well. They will parse the url of the resource (not limited to css), copy the resource to the corresponding location according to our configuration, and modify the reference of the resource path so that resources can be loaded correctly.
And url-loader has one more function than file-loader . Usually, if there are many pictures on the page, sending multiple requests to load pictures will reduce the performance of the page. But url-loader will help us solve this problem. It will help us convert pictures into base64 format strings, so there is no need to request resource files, just request strings, which can improve performance. Of course, too large image files are not suitable for converting to base64 format, so the limit attribute is generally set, and the image file is converted to base64 only if it is smaller than this value.
Note that after webpack 5 , resource modules (assets) are built in , which means that webpack can process static resource files by itself. Before webpack 5 , it was necessary to install url-loader and file-loader to process static resource files in the project. If webpack 5 is installed and usedurl-loader , you need to add a line type: 'javascript/auto' under test , as follows:
{
test: /\.(png|jpg|gif|jpeg)$/,
type: 'javascript/auto', // webpack 5 需要
use: [
{
loader: 'url-loader',
options: {
limit: 10240,
esModule: false,
name: 'assets/[name].[ext]'
}
}
],
exclude: /node_modules/
}
What is the difference between url-loader and file-loader?
In fact, the two functions are similar, url-loader is packaged based on file-loader , but it does not depend on file-loader , that is, when installing url-loader , you only need to use url-loader directly , no need to install file-loader .
I won't go into details about their configuration, please refer to the following documents
file-loader document: https://github.com/webpack-contrib/file-loader
url-loader document: https://www.npmjs.com/ package/url-loader
Solve the problem
The question raised in the background, I didn't know at the beginning that url-loader and file-loader cannot be shared. But after understanding their differences, I felt that file-loader was a bit redundant, so I commented out its configuration. The code is as follows: As a result, the 
problem was solved, and the picture displayed normally:
