webpack4.x打包过程中因为图片的路径导致的问题

在学习webpack加载图片时，想加载指定目录下的图片时，浏览器报错

也就是说, 打包之后这个图片文件找不到了, 那么原因出在哪里呢?

先来看一下我在webpack.config.js文件中的配置: 在这里其实我的loader并没有使用错误的, 图片对应的就是使用file-loader来处理. 

 

 

再看下项目根目录结构：通过浏览器的报错信息可以发现, build.js为我们指定的这个图片的地址明显不正确, 

在默认情况下, 打包过程会将使用到的图片拷贝一份放到output的path指定的目录下, 然而在build.js中引用的图片路径确实整个工程文件的根目录, 因此自然引用不到.

 

哪怎么解决呢？

只要在模板中把图片存放图片的文件路径写对就可以了

下面图片是引用图片的源代码