在 webpack 中使用 file-loader 和 html-loader 时,图像的 src attr 为“[object Module]”

2024-01-25

我正在从头开始使用 webpack4 做一个项目。但是当我尝试在 HTML 文件中显示图像时,我遇到了一个奇怪的问题: 后npm run build,图像标签的src构建为<image src="[object Module]"。 HTML 部分是:

<img src="images/main_background.jpg">

The webpack.config.js这是 :

   // ignore ...
   {
    test: /\.html$/,
    use: [
       {loader: 'html-loader'}
    ]
   },
   {
      test: /\.(jpeg|jpg|png)$/,
      use: [
        'file-loader'
      ]
  }


以及这两个加载器的版本:

"file-loader": "^5.0.2",
"html-loader": "^0.5.5",

我无法弄清楚问题是什么......


尝试添加esModule: false文件加载器的选项如下:

  ...
  {
    test: /\.(jpeg|jpg|png)$/,
    use: [
      loader: 'file-loader',
      options: {
        esModule: false
      }
    ]
  }
  ...

这同样适用于 url-loader。

esModule 选项已在版本 4.3.0 的文件加载器中引入,在 5.0.0 中它已默认设置为 true,这可能是一个重大更改。

Sources:

  • 文件加载器发布历史 https://github.com/webpack-contrib/file-loader/releases
  • 相关的github问题 https://github.com/webpack-contrib/file-loader/issues/338
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 webpack 中使用 file-loader 和 html-loader 时,图像的 src attr 为“[object Module]” 的相关文章

随机推荐

  • 预编译头文件和普通包含文件

    使用预编译头时 当我在常规头中包含一个已经包含在预编译头中的头时 是否会产生影响 或产生不良影响 或者换句话说 当我在另一个头文件中包含头 x 并同时在我的预编译头文件中包含 x 时 这是否会阻止预编译头提供的优化发挥作用 No 一般来说
  • 如何正确应用RGBA_8888和抖动?

    我有带有渐变的splash png 但在屏幕上这个图像看起来不太好 我的简单 apk这个问题包括 public class TestditherActivity extends Activity Override public void o
  • 替换文本文件中的一行

    我有一个文本文件 被另一个应用程序用作配置文件 我已将文件的每一行读入字符串数组 string arrLine File ReadAllLines pathToFile 这正是我需要的 现在 我需要做的就是用字符串替换 arrLine x
  • 如何从角度材料日期选择器获取当前时间?

    我正在使用角度材料日期选择器https material angular io components select overview https material angular io components select overview
  • 在CMake项目下编译单个文件?

    我正在开发一个 C 项目 该项目将包含在一个更大的项目中 我已经看到 在更大的项目 是一个 Qt 应用程序 它是从 qmake 生成的 上 我可以从 linux 命令行编译单个文件 只需输入特定文件的相对路径作为 make 的参数 另一方面
  • 尝试将实体编码为 json 时出现问题

    我尝试将 Doctrine 实体编码为 JSON 字符串 以作为 Ajax 响应发送 所以 我检查了文档 串行器组件 http symfony com doc current components serializer html 我尝试使用
  • Vue.js 空过滤结果

    在 Vue 中 我必须过滤一些数据
  • Swift3随机扩展方法

    我使用这个扩展方法来生成随机数 func Rand range Range
  • 从使用 atexit() 注册的函数内部获取退出状态

    在我的里面atexit 注册函数我想获得退出状态 参数exit 3 或者 main 返回了什么 有没有任何便携式方法可以做到这一点 是否有任何 GNU libc 特定的方法可以做到这一点 例如我可以引用的全局持有该值 这是一个技巧 hack
  • 如何将图片上传到另一台服务器?

    我想创建一个提供 html 内容的应用程序服务器 其中包含由不同域上的另一台服务器提供的静态图像的链接 图片由用户通过应用服务器上传 我将执行以下操作将 JPEG 文件上传到应用程序服务器 if file exists folder nam
  • TFS 构建失败,但 Visual Studio 可以工作

    我做了一个新的构建定义 大多数选项保留默认值 我暂时只是玩玩而已 问题是 当我在 Visual Studio 2013 中以发布模式构建项目时 一切都很好 没有错误 当 TFS 构建它时 我遇到了一些错误 我必须将其从我自己的语言翻译成英语
  • 如何在滚动视图中调整图像视图的大小,就像在此图像中完成的那样?

    我创建了一个滚动视图 并在其中放置了一个图像视图 我希望滚动它以与下图中相同的方式调整大小 但到目前为止我还没有取得什么成功 在我的尝试中 图像在滚动时调整了大小 但是调整大小后仍有剩余空间 您将如何修改以下内容 Image 到目前为止我的
  • JS 中的 Excel PMT 函数

    我在互联网上找到了一个关于 PMT 计算的小片段 function PMT i n p return i p Math pow 1 i n 1 Math pow 1 i n function CalculatePMTFromForm idL
  • 如何在多个显示器上最大化窗口?

    使用 AutoHotkey 如何绑定热键以在多个显示器上拉伸 最大化 跨越窗口 以便它覆盖两个显示器 现在 我必须通过用鼠标手动拉伸窗口来完成此操作 我知道有专用工具可以执行此操作 但我已经在运行 AutoHotkey 脚本 并且宁愿限制我
  • SOQL python 中的通配符

    我正在尝试使用 simple salesforce 包使用 python 从 salesforce 进行查询 当我使用通配符时 它会抛出故障错误 soql SELECT FROM Contact where LastModifiedDate
  • Protractor 的 waitForAngular() 在 angular-webapp 上失败(真实设备上的 appium/chrome)

    我 新 使用量角器来运行 e2e 黄瓜测试 我有一个基于 angularJS 的网络应用程序 我正在使用 appium 在真实的 Android 设备上远程运行测试 这是我正在使用的版本 windows8 1 email protected
  • SBT:评估任务顺序

    我正在尝试获取有关 sbt 项目中所有模块的信息 有以下代码 lazy val getModule taskKey Module get single module info lazy val allModules taskKey Seq
  • 在 FilterChain.doFilter() - HttpServletResponseWrapper 之后添加 Cookie 以忽略刷新?

    我想将 cookie 添加到HttpServletResponse其内容 通常是 HTML 呈现后 正如这里提到的 http osdir com ml java jasig uportal 2005 10 msg00276 html htt
  • 基于 SQS 消息触发 SWF 工作流

    前言 我正在尝试针对我认为非常常见的用例提出一个提案 并且我想使用 Amazon 的 SWF 和 SQS 来实现我的目标 可能还有其他服务更符合我想要做的事情 所以如果您有建议 请随时扔掉它们 Problem 最基本的需求是客户端 移动设备
  • 在 webpack 中使用 file-loader 和 html-loader 时,图像的 src attr 为“[object Module]”

    我正在从头开始使用 webpack4 做一个项目 但是当我尝试在 HTML 文件中显示图像时 我遇到了一个奇怪的问题 后npm run build 图像标签的src构建为