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

﹏ヽ暗。殇╰゛Y 2023-06-26 12:28 7阅读 0赞

<!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
        }
      }]
    }

这样就可以正常打包了

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me

﹏ヽ暗。殇╰゛Y/ 2023年06月26日 12:28/ 0 赞/ 8 阅读

相关在使用Webpack打包本地img图片文件时图片加载失败 [object Module] 404 (Not Found)

问题描述在Vue组件里引入了一张本地的图片： <template> <div> <img src="../../images/test.

以你之姓@/ 2023年05月21日 07:08/ 0 赞/ 13 阅读

相关 webpack 打包html文件

webpack 打包html文件 `webpack.config.js`配置文件内容为： / loader: 1. 下载 2. 使用（配置）

一时失言乱红尘/ 2023年01月09日 03:43/ 0 赞/ 263 阅读

相关图片img标签 src拼接路径问题

刚接触vue,v-for中获取字段都很正常，但是![Image 1][]中的路径不知道怎么拼接。还是我张哥出马，一个赶俩。废话少说直接上代码。在vm实例中的data加上ur

野性酷女/ 2023年01月07日 08:56/ 0 赞/ 234 阅读

相关 webpack中img标签的src使用相对路径的方法

简介 > Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码

迈不过友情╰/ 2023年01月05日 05:12/ 0 赞/ 418 阅读

相关 html篇：img src使用base64格式数据

html篇：img src使用base64格式数据 img src 使用 base64 图片数据在网页上显示一张图片通常是 <img src="../xxx.png"

待我称王封你为后i/ 2022年12月20日 12:44/ 0 赞/ 143 阅读

相关 HTML Img标签 src为网络地址无法显示图片问题解决（https）

举例说明： <img src="https://pic.cnblogs.com/avatar/1549846/20191126100502.png" alt="加载失败">

- 日理万妓/ 2022年12月15日 03:48/ 0 赞/ 422 阅读

相关 Webpack打包HTML

1、包装html-webpack-plugin插件并在webpack.config.js中添加插件 npm install html-webpack-plugin

忘是亡心i/ 2022年04月06日 08:12/ 0 赞/ 389 阅读

相关 vue.js+webpack 为 img src 赋值的路径问题解决方法

首先，如果使用的是img标签那么可以这样 data () { return { img: require('@/assets/

傷城~/ 2022年02月28日 09:04/ 0 赞/ 606 阅读

相关 webpack4 打包html资源

1、下载插件 cnpm i -D html-webpack-plugin 2、引入插件 const X = require('ht

绝地灬酷狼/ 2021年07月24日 13:43/ 0 赞/ 540 阅读