使用 webpack 打包，图片地址变成了 [object object]又或者图片没有报错却加载不出来

当使用webpack对图片进行打包时 执行发现图片路径变为url([object object])实际上这是由于url-loader更新的版本造成的，我们想要图片正确显示就需要在webpack.config.js中将url-loader进行配置，下面是一段配置示例：

图片显示不出来而且还不报错？
我们可以尝试将limit改为比图片大小改为>（图片尺寸（KB） * 1024）即可
不想改limit值？也可
我们只需在终端中执行npm install file-loader --save-dev命令，安装完成就可以加载比limit要大的图片了
图片还是显示不出来？
不要着急呀，其实还有图片路径不对呢，图片本身是在src文件夹下的，打包之后就变成dist文件夹下的图片了，并且webpack还为图片重新生成了新的长长的图片名，路径就不是当时我们写进css里面那个路径了呀
原来的图片在这里：
写到css中的路径为：
打包之后图片被塞进dist中并被重新命了名

就好比你的小朋友搬了家但是你还去她原来的地址去找她，那不是自然找不到的嘛，怎么办，我们来配置一下，这样可以获取到最新的地址了，自然就可以找到啦，具体这么做：去到我们的webpack.config.js文件里配置一下子：

防止被打包的图片重新命名重复，需要添加配置：

我的图片加载成功出来啦 遇到同样问题的小朋友快来试试叭！