脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → webpack 打包html img src

webpack打包html里面img后src为“[object Module]”问题

 更新时间：2019年12月22日 11:36:27   作者：LDP_Rou  
这篇文章主要介绍了webpack打包html里面img后src为“[object Module]”问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

在html中引入img图片

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document1</title>
</head>
<body>
 <div id="root" >
  <img src="./logo.jpg" alt="">
 </div>
</html>

使用url-loader/file-loader结合html-loader打包

{
  test: /\.(png|jpg|gif|jpeg)$/,
  use: [{
    loader: 'url-loader',
    loader: 'file-loader',
    options: {
      name: '[name].[ext]',
      limit: 10240
    }
  }]
},
{
  test: /\.(htm|html)$/,
  loader: 'html-loader'
}

发现打包后html里面，img的src为[object Module]，

但是如果使用"file-loader": "^4.2.0"或者"file-loader": "^2.0.0"却可以正常打包

后来发现file-loader在新版本中esModule默认为true，因此手动设置为false

{
  test: /\.(png|jpg|gif|jpeg)$/,
  use: [{
    loader: 'url-loader',
    // loader: 'file-loader',
    options: {
      esModule: false, // 这里设置为false
      name: '[name].[ext]',
      limit: 10240
    }
  }]
}

这样就可以正常打包了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • js实现上传文件添加和删除文件选择框

    js实现上传文件添加和删除文件选择框

    这篇文章主要为大家详细介绍了js实现上传文件添加和删除文件选择框 ,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • Bootstrap表单制作代码

    Bootstrap表单制作代码

    这篇文章主要为大家详细介绍了BootStrap表单的制作代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03
  • JS实现页面侧边栏效果探究

    JS实现页面侧边栏效果探究

    这篇文章主要介绍了JS实现页面侧边栏效果探究,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-01-01
  • js ajaxfileupload.js上传报错的解决方法

    js ajaxfileupload.js上传报错的解决方法

    这篇文章主要为大家详细介绍了js ajaxupload.js上传报错的解决方法，感兴趣的小伙伴们可以参考一下
    2016-05-05
  • JS模拟bootstrap下拉菜单效果实例

    JS模拟bootstrap下拉菜单效果实例

    这篇文章主要介绍了JS模拟bootstrap下拉菜单效果,结合完整实例形式分析了javascript动态操作页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • 详解微信小程序开发聊天室—实时聊天，支持图片预览

    详解微信小程序开发聊天室—实时聊天，支持图片预览

    这篇文章主要介绍了微信小程序实时聊天支持图片预览，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • localStorage实现便签小程序

    localStorage实现便签小程序

    这篇文章主要为大家详细介绍了localStorage实现便签小程序的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-11-11
  • js 自带的sort() 方法全面了解

    js 自带的sort() 方法全面了解

    下面小编就为大家带来一篇js 自带的sort() 方法全面了解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 在uni-app中踩过的坑及解决

    在uni-app中踩过的坑及解决

    这篇文章主要介绍了在uni-app中踩过的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-04-04
  • Javascript发送AJAX请求实例代码

    Javascript发送AJAX请求实例代码

    这篇文章主要介绍了Javascript发送AJAX请求的实例代码，非常不错，具有参考借鉴价值,需要的朋友可以参考下
    2016-08-08

最新评论