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

当使用webpack对图片进行打包时 执行发现图片路径变为url([object object])实际上这是由于url-loader更新的版本造成的,我们想要图片正确显示就需要在webpack.config.js中将url-loader进行配置,下面是一段配置示例:
使用 webpack 打包,图片地址变成了 [object object]又或者图片没有报错却加载不出来
图片显示不出来而且还不报错?
我们可以尝试将limit改为比图片大小改为>(图片尺寸(KB) * 1024)即可
不想改limit值?也可
我们只需在终端中执行npm install file-loader --save-dev命令,安装完成就可以加载比limit要大的图片了
图片还是显示不出来?
不要着急呀,其实还有图片路径不对呢,图片本身是在src文件夹下的,打包之后就变成dist文件夹下的图片了,并且webpack还为图片重新生成了新的长长的图片名,路径就不是当时我们写进css里面那个路径了呀
原来的图片在这里:使用 webpack 打包,图片地址变成了 [object object]又或者图片没有报错却加载不出来
写到css中的路径为:使用 webpack 打包,图片地址变成了 [object object]又或者图片没有报错却加载不出来
打包之后图片被塞进dist中并被重新命了名
使用 webpack 打包,图片地址变成了 [object object]又或者图片没有报错却加载不出来
就好比你的小朋友搬了家但是你还去她原来的地址去找她,那不是自然找不到的嘛,怎么办,我们来配置一下,这样可以获取到最新的地址了,自然就可以找到啦,具体这么做:去到我们的webpack.config.js文件里配置一下子:
使用 webpack 打包,图片地址变成了 [object object]又或者图片没有报错却加载不出来
我的图片加载成功出来啦 遇到同样问题的小朋友快来试试叭!
使用 webpack 打包,图片地址变成了 [object object]又或者图片没有报错却加载不出来