使用 webpack 打包vue项目时，图片的URL地址变成了 [object object]又或者图片没有报错却加载不出来的原因

当使用webpack对图片进行打包时，发现图片路径变为url([object object])。这是因为我们在使用url-loader的时候，有一个limit属性，图片实际的大小大于limit指定的大小，因此会去使用file-loader，但项目里面没有这个包，要先用npm安装一下。或者直接将limit调大一点。也有可能是因为url-loader更新的版本造成的。

错误：

因此解决的办法有：
方法一：如果没有报错，但图片没有显示出来。我们只需要在webpack.config.js中将url-loader进行配置，加上esModule这个属性。

方法二：如果报错的情况下有两种解决方法。
（1）解决方法一：直接修改limit的值。limit的大小要满足：limit的值>（图片尺寸（KB） * 1024）。

（2）解决方法二：安装file-loader包
在cmd中，或者webstorm的控制台中输入npm install file-loader --save-dev命令，安装完成就可以加载比limit要大的图片了。

注意：
在npm install file-loader --save-dev直接安装file-loader时，他的默认版本是很高的，可能会不兼容比较低版本的webpack，会报下图中的错误。（我这里webpack是3.6.0的）那么可以通过@直接指定安装file-loader的版本，这里使用3.0.1是可以的。

我们只需通过在控制台里面敲npm install --save-dev file-loader@3.0.1命令覆盖之前的版本即可。

在通过npm run build就不会报错。

但是图片还是显示不出来

其实这是因为图片路径不对造成的，图片本身是在src文件夹下的，通过file-loader打包之后就变成在dist文件夹下的图片了，并且webpack还为图片重新生成了新的长长的图片名，路径就当然不是当时我们写进css里面那个路径了（即他的路径变成了：dist/很长的一个新的文件名）

解决办法：
到webpack.config.js文件里配置一下，这样就可以获取到新的地址。具体操作：到的webpack.config.js文件里配置以下属性便可实现：

以后涉及到url的东西，就会在路径前面自动添加上dist/。重新打包便可加载出图片。

注意：这里的文件路径是这样子，如果项目完成后，将index打包到dist下的话，就不需要添加该属性。因为打包后的图片新路径和index都是在dist文件下，也就是当前文件下，无需加dist便可获得。

另外，防止被打包的图片重新命名重复，可以添加以下配置：