背景
vue项目（webpack构建的项目）中如何处理静态资源？ 这句话看似简单，但静态资源的范围却很广。 如：图片、图标、字体、js文件等，都是静态资源。 在工程后端项目中，它们的处理方式有所不同。 比如图片，以前后端项目可能会直接引用图片地址，但是在工程后端项目中，所有的代码都会通过webpack或者gulp等打包重构工具进行编译处理，并且引用的路径将在编译后发生变化，图像文件也可能会经过特殊处理，例如将其转换为base64格式。
前不久，在帮朋友处理问题时，遇到了Vue项目中图片加载时不显示的问题。 并且在浏览器控制台看图片资源加载是否正常，没有报错或者404，即路径没有问题，但是图片没有显示，又打开新标签页访问图片路径，页面显示一个空白的小方格。 如右图所示：
打开控制台查看图片加载路径。 图片加载没有问题：
这期间我尝试过在CSS样式中写background:urlwebpack 图片加载，也尝试过在样式内联样式中使用require引用图片，但结果都是一样的。 这里可以确定这个问题与使用情况无关。 那么就只有加载图片的时候出现问题了。
对于其他项目，您可以检查您的webpack配置（对于非webpack项目，只需检查相应的配置）。 这是一个vue项目。 我们直接看vue.config.js中静态资源的配置。 如右图所示：
从代码中可以看到，该项目使用了url-loader和file-loader这两个加载器来处理png、jpg、gif等图像资源。 什么是 url 加载器和文件加载器？ 让我们详细谈谈它们。
为什么我们需要 url-loader 和 file-loader？
上面提到，引用静态文件时，项目启动或打包编译后，资源的真实路径可能与编译前不同，从而可能导致镜像加载失败。 那么url-loader和file-loader就可以很好的帮助我们解决这个问题。 它们会解析资源的url（不限于css）webpack 图片加载，根据我们的配置将资源复制到相应的位置，并改变资源的引用路径，从而使资源能够正确加载。
url-loader 比 file-loader 多了一项功能。 一般情况下，如果页面上图片较多，发出多次请求加载图片会提高页面性能。 但是url-loader会帮助我们解决这个问题。 它会帮助我们将图片转换成base64格式的字符串，这样就不需要请求资源文件，只需要请求字符串，这样可以提高性能。 事实上，太大的图像文件不适合转换为base64格式，因此通常会设置limit属性。 如果值大于该值，则转换为base64。
注意，webpack 5之后，增加了外部资源模块（assets），这意味着webpack可以自己处理静态资源文件。 在webpack5之前，需要安装url-loader和file-loader来处理项目中的静态资源文件。 如果webpack5是使用url-loader安装的，则需要在test下添加一行type:'javascript/auto'，如下：
{
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/
}
url-loader 和 file-loader 有什么区别？
虽然两者功能类似，但是url-loader是基于file-loader进行封装的，但是它并不依赖于file-loader，即安装url-loader时，只需要直接使用url-loader即可，并且有无需安装文件加载器。
我不会详细介绍他们的配置。 详情请参阅以下文档。
文件加载器文档：
url 加载器文档：
解决这个问题
关于后台提出的问题，我一开始并不知道url-loader和file-loader不能共享。 但在了解了它们的差异后，我认为 file-loader 有点多余，所以我注释掉了它的配置。 代码如下：
结果问题解决了，图片正常显示：
