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

最新推荐文章于 2023-10-16 17:09:19 发布
最新推荐文章于 2023-10-16 17:09:19 发布
阅读量437 收藏 1
点赞数
分类专栏： webpack
原文链接：https://blog.csdn.net/hahahhahahahha123456/article/details/103797260
版权 
 

  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4. <meta charset="UTF-8">

  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">

  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">

  7. <title>Document1</title>

  8. </head>

  9. <body>

  10. <div id="root" >

  11. <img src="./logo.jpg" alt="">

  12. </div>

  13. </html>

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

 

  1. {

  2. test: /\.(png|jpg|gif|jpeg)$/,

  3. use: [{

  4. loader: 'url-loader',

  5. loader: 'file-loader',

  6. options: {

  7. name: '[name].[ext]',

  8. limit: 10240

  9. }

  10. }]

  11. },

  12. {

  13. test: /\.(htm|html)$/,

  14. loader: 'html-loader'

  15. }

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

 

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

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

 

  1. {

  2. test: /\.(png|jpg|gif|jpeg)$/,

  3. use: [{

  4. loader: 'url-loader',

  5. // loader: 'file-loader',

  6. options: {

  7. esModule: false, // 这里设置为false

  8. name: '[name].[ext]',

  9. limit: 10240

  10. }

  11. }]

  12. }

这样就可以正常打包了

飞翔的熊blabla
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
src=“[object Module]“ 的原因及解决方案
weixin_38728902的博客
04-16 2936
使用webpack4构建的项目，出现 src="[object Module]" 的原因及解决方案。 Vue官方文档中说了vue-loader的基本原理，他会将Vue模板中的 转为下面这段JS代码： createElement('img', { attrs: { src: require('../image.png') // require()是CommonJS模块语法 } }) 对于图像我们在Webpack中一般使用 url-loader 来处理 { test: /\.(
webpack：url-loader打包img后src为[object Module]
彭世瑜的博客
11-11 1981
引入图片的方式 <!-- 相对路径引入 --> <img src="./logo.jpg" alt=""> <!-- 绝对路径引入 --> <img src="@/assets/logo.jpg" alt=""> <!-- 引入static文件, 不会处理 --> <img src="/static/logo.jpg" alt=""> webapck 配置文件 { test: /\.(jpg|png|gif|jpeg|woff
webpack打包图片资源-img标签中src 为 [object Module]
zm_miner的博客
02-02 1076
使用webpack打包图片资源时, 使用 url-loader 可以处理less/css/styles文件中引入的图片资源 但是当在html中直接使用img标签 引入图片时, webpack是不会识别, 如下: img标签中的图片没有显示 所以需要html-loader来(负责引入img, 从而能被url-loader进行处理) 打包成功以后, 会有一个问题, 在打包成功后的build文件下的html中img标签的src引入路径不正确 原因: 因为url-loader默认使用es6模块化解析, 而h
使用webpackd的url-loader获取不到图片地址出现src=“[object Module]“ 问题
u011608672的博客
01-15 758
webpacke渲染的页面获取不到图片地址问题 代码设置地址相对路径获取图片 页面渲染出现src="[object Module]" 出现问题 webpack.config.js中加载器url-loader的设置问题 原url-loader设置如下 module: { // 这个节点，用于配置 所有 第三方模块 加载器 rules: [ // 所有第三方模块的 匹配规则 { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loa
解决Vue中img图像src变成“[object Module]“无法正确加载的问题
zyh20090823的博客
06-05 2562
会出现此问题的原因 解决方案一
纯html+javascript+css webpack打包的项目
最新发布
04-12
- **插件(plugins)**：扩展Webpack的功能，比如ExtractTextWebpackPlugin可以将CSS提取为单独的文件，HtmlWebpackPlugin自动生成HTML文件并注入打包后的脚本。 在项目目录结构中，通常包括以下部分： - `src`：源...
Webpack打包慢问题的完美解决方法
08-31
Webpack 打包慢问题的完美解决方法 在使用 Webpack 打包项目时，经常会遇到打包速度慢的问题，这是因为 Webpack 需要处理大量的模块，从而导致打包速度慢。为了解决这个问题，我们需要了解 Webpack 的工作原理和...
解决vue-cli项目webpack打包后iconfont文件路径的问题
10-18
然而，当使用`webpack`进行打包时，由于文件路径的处理方式，可能会导致打包后的CSS文件引用的字体文件路径错误，从而在生产环境中无法正常显示图标。 在描述的问题中，我们看到打包后的字体文件位于`static/fonts`...
解决在vue项目中webpack打包后字体不生效的问题
10-18
这个问题通常表现为在开发环境中正常显示的字体，在经过Webpack打包后在生产环境中无法正常渲染。 出现这种问题的原因在于Webpack在处理CSS时，可能会对字符串进行转义，尤其是当使用中文字符作为字体名称时。例如...
记一个webpack加载图像变成src=“[object Module]“问题
蛐蛐的博客
07-20 431
1.简介 使用file-loader或者url-loader加载图片，发现图片src变为[object Module] 2.解决 主要在于esModule选项 默认情况下，file-loader生成使用 ES 模块语法的 JS 模块。 在某些情况下，使用 ES 模块是有益的，例如在模块串联或者tree shaking的情况下。 您可以使用以下方法启用 CommonJS 模块语法： { test: /\.(gif|png|..
处理vue直接引入图片地址时显示不出来的问题 src=“[object Module]“
qq_24418107的博客
10-16 1347
这是因为vue使用的是commonjs语法规范，而file-loader/url-loader使用的es module语法规范，解决方法是处理图片时不适用es module的语法。在webpack中使用vue-loader编译template之后，发现图片加载不出来了，开发人员工具中显示src=“[object Module]”这是因为当vue-loader编译template块之后，会将所有的资源url转换为webpack模块请求。我们需要在vue.config.js里面稍加配置就可以了。
解决React 的＜img ＞src使用require的方式图片显示不出来或者音频显示不出来，展示的是[object Module]的问题
m0_51578916的博客
01-21 4462
1， 解决方法一、 　　再导入的图片后加.default即可 　　<img src={require('../../images/bg.png').default} alt="" /> 解决方法二、 　　 　　import imgUrl from '../../images/bg.png'; 　　<img src={imgUrl} alt="" /> 原因： 　　首先 webpack 支持 CommonJS、AMD 和 ES6模块打包。当我们用 单文件写..
img标签src="[object Moudle]"问题解决办法
大风起兮云飞扬
02-09 3233
       在使用webpack配置配置项目时，遇到了图片src="[object Moudle]"的问题，具体如图：         配置图片url-loader,配置如图: 解决办法如图： 在options里面加入esModule:false...
Img中src路径变成Object问题处理
gyueh的博客
12-16 2350
处理办法： 关闭浏览器，重新启动项目
vue中设置内联样式style 动态绑定背景图backgroundimage不生效问题，以及动态绑定img的src,图片无法显示问题(src=“[object Module]“)
热门推荐
lingliu0824的博客
07-25 2万+
（以下情况是通过style设置内联样式时发生的问题，在外部css文件和style标签里面定义的样式不会出现以下问题） 我们可能会通过以下这种方式来设置元素的背景（注意元素需设置宽高，或者元素里有内容支撑） 使用vue-cli创建项目后，使用以下三种方式设置背景样式时，第一种方式无法生效，后面两种方式OK， 使用第一种方式时，无论这里用@/assets/logo.png，~@/assets/logo.png，…/assets/logo.png作为背景图片路径都无法成功，这里确定，图片路径是没有问题的 我
wevpack html 中src,webpack打包html里面img后src为“[object Module]”问题
weixin_33665771的博客
06-18 136
在html中引入img图片Document1 使用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: /...
图片img标签 src=“[object Module]“
yyanglirong的博客
04-14 494
首先核对引入路径 没有问题的话 试试卸载file-loader或者url-loader 或者降低版本 因为我发现在我没有用到这两个，安装下载多此一举，所以就直接卸载了
webpack打包项目后出现img后src为“[object Module]”问题
AGCA_ZXL的博客
06-02 280
解决方法 在webpack.config.js里的module 的rules数组里，使用url-loader/file-loader结合html-loader打包，添加esModule: false。 esModule默认为true，因此手动设置为false { test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: [{ loader: 'url-loader',
webpack 打包 src 目录
06-01
要使用Webpack打包`src`目录，您可以在Webpack配置中指定`entry`选项来告诉Webpack从哪里开始打包应用程序。这是一个简单的Webpack配置示例，它将`src`目录下的`index.js`文件作为入口文件： ``` module.exports = ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值