file-loader打包图片文件时路径错误输出为[object-module]的解决方法
最近在学习使用webpack4.0自己搭建vue脚手架，在搭建过程中，踩了许多坑，使用file-loader打包图片文件时就遇到了以下的问题。
这是我的webpack 处理打包图片相关配置项：
...
module: {
rules: [
...
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
name: '[name].[ext]',
outputPath: 'imgs/'
}
}
]
},
...
]
}
...
这个配置也是和目前网上教程差不多的。使用 url-loader 编译图片文件，输出到imgs文件夹下，乍一看也没什么问题，我相信你也是这么认为的。
但是webpack构建之后，会发现，页面上引用的图片都无法正常显示：
图片引用错误
打开控制台，会发现所有图片的路径都变成了 [object module]
object module
经过一番努力的探索，终于在stackoverflow上找到了 相应的问题
下方回答我翻译下：
默认情况下，file-loader生成使用ES模块语法的JS模块。在某些情况下，使用ES模块是有益的，比如在模块连接和树抖动的情况下。
file-loader-options
简而言之就是file-loader新版本默认使用了esModule语法，造成了引用图片文件时的方式和以前的版本不一样，通过查看其仓库的release会发现：在v4.3.0版本就引入这一新特性。
file-loader-versions
那如何解决这一问题呢？在刚才的stackoverflow问题回答里说明了有两种解决方法：
在引用图片时，加个 .default 后缀
<img src="require('assets/logo.png').default"/>
在webpack的file-loader配置项里，设置esModule为false
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
{
loader: 'file-loader',
options: {
esModule: false
}
}
]
}
两种方法对比起来，显而易见，相信你已经知道了哪个方法更好用。于是我修改了webpack配置后，再编译，就没问题啦:wink:。
build-success
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍webpack打包后直接访问页面图片路径错误的解决方法，包括了webpack打包后直接访问页面图片路径错误的解决方法的使用技巧和注意事项，需要的朋友参考一下 前言 本文说的这种图片路径错误是这样的，运行webpack-dev-server，一切正常，没有错误。当webpack之后，直接打开index页面，报错，图片找不到，找不到的原因是路径错误。 先看我的项目代码 webpack.c
-
问题内容： 我正在建立一个带有react和webpack的网站。当我使用webpack构建应用程序并尝试包含图像时，图像与其他资产一起写入了build文件夹，但是webpack输出的图像链接不正确。我可以进入构建文件夹并查看图像，因此正确复制了该图像，这是链接错误。 我的react组件看起来像这样： 我的Webpack配置如下所示： 从昨天开始，我就一直把头撞在墙上，因此，我们将不胜感激。让我知道
-
本文向大家介绍python错误：AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法，包括了python错误：AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法的使用技巧和注意事项，需要的朋友参考一
-
本文向大家介绍Vue打包后出现一些map文件的解决方法，包括了Vue打包后出现一些map文件的解决方法的使用技巧和注意事项，需要的朋友参考一下 Vue打包后出现一些map文件的解决办法： 问题： 可能很多人在做vue项目打包，打包之后js中，会自动生成一些map文件，那我们怎么把它去掉不要呢？ 1，运行 cnpm run build 开始打包 2，会在项目目录下自动创建dist目录，打包好的文
-
问题内容： 我正在尝试在Unix计算机中加载“ rJava”包。在加载之前，我已经使用 在我的R脚本中。 尽管如此，我收到以下错误（以下是错误的一部分）： 如您所见，错误显示 / usr / lib / jvm / jre / bin / java：没有这样的文件或目录 。但是我还没有将其设置为 myfilepath 。如何防止安装程序查看此路径？ 请帮助。 问题答案： 这很完美。如果将来有人阅读
-
我在将旧代码同步到新代码，代码如下： 但发现了如下问题，旧代码打印 formData 结果如下： 但是新代码打印 formData 结果如下： 请问有什么可能会触发我这个错误呢？还望指点，谢谢！ 我尝试通过 JSON.stringify 将内容转为 json 字符串 得到了接近正确的结果，如下： 但正确的结果应该是：
-
这个怎么解决？ 把他们调换顺序也不对
-
本文向大家介绍Codeigniter上传图片出现“You did not select a file to upload”错误解决办法，包括了Codeigniter上传图片出现“You did not select a file to upload”错误解决办法的使用技巧和注意事项，需要的朋友参考一下 Codeigniter自带的文件上传类非常好用，您可以设置指定上传某类型的文件及指定大小的文件。