webpack打包图片资源-img标签中src 为 [object Module]

最新推荐文章于 2022-04-05 22:16:25 发布
最新推荐文章于 2022-04-05 22:16:25 发布
阅读量1k 收藏 2
点赞数 2
分类专栏： webpack 文章标签： webpack esModule
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zm_miner/article/details/113535324
版权
在使用webpack打包时，遇到图片资源在html img标签中显示为[object Module]的问题。通过引入html-loader来处理img标签，配合url-loader处理less/css中的图片。问题在于url-loader默认使用esModule，而html-loader使用commonjs。解决方法是在webpack配置中设置url-loader的esModule为false，或者更新html-loader到1.x.x以上版本，避免此问题。
摘要由CSDN通过智能技术生成

使用webpack打包图片资源时, 使用 url-loader 可以处理less/css/styles文件中引入的图片资源
但是当在html中直接使用img标签 引入图片时, webpack是不会识别,
如下: img标签中的图片没有显示
在这里插入图片描述

所以需要html-loader来(负责引入img, 从而能被url-loader进行处理)

在这里插入图片描述

打包成功以后, 会有一个问题, 在打包成功后的build文件下的html中img标签的src引入路径不正确
在这里插入图片描述

原因: 因为url-loader默认使用es6模块化解析, 而html-loader引入图片是commonjs
解决: esModule: false,
在这里插入图片描述
然后执行webpack

在这里插入图片描述

会发现src已经变正常

出现该问题 查看package.json 发现 “html-loader”: “^0.5.5”, 更新html-loader的版本到1.xx.xx 已经不会出现该问题, 不需要设置esModule: false, src的路径也是正确的

嚣张.miner
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Webpack打包静态资源之图片篇
Meskjei的博客
08-26 1344
文章目录占位符更改输出目录url-loader 占位符 我们知道，在打包图片的时候，名字是被file-loader重新命名过的。那如果我想使用图片本身的名字该怎么办呢？同样的，可以在webpack.config.js里配置。 const path = require('path'); module.exports ={ entry: './src/index.js', outpu...
webpack打包html里面img后src为“[object Module]”问题
飞翔的熊blabla
08-21 443
<!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"> ...
webpack：url-loader打包img后src为[object Module]
彭世瑜的博客
11-11 1990
引入图片的方式 <!-- 相对路径引入 --> <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的理解
qq_41923008的博客
01-07 132
Webpack 的构建流程主要有哪些环节？如果可以请尽可能详尽的描述 Webpack 打包的整个过程 在项目中一般都会散落着各种资源文件 打包原理 打包之后是一个自执行函数 参数为一个对象，键为各个模块的路径，值为各个-模块的代码 在webpack可以用各种loader加载各种资源文件，对资源文件做处理，还可以对 ...
webpack打包处理img
Zyl_CN的博客
04-01 744
一般情况下，webpack无法处理css中的url地址（背景图片、字体等），所以需要使用插件来进行处理 npm i url-loader -d npm i file-loader -d //基于url-loader的依赖 然后在webpack.config.js进行配置修改 {test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?...
Webpack打包字体font-awesome的方法示例
01-19
使用webpack构建font-awesome或者bootstrap的时候，最常见的一个问题就是构建字体文件的问题。经常会出现无法找到字体文件的问题。下面就讲一下如何正确构建引入字体文件： 1. 首先安装依赖: 代码如下:npm install...
webpack-wxapp-module-plugin:微信小程序 webpack打包插件
04-28
webpack-wxapp-module-plugin 一、简介 微信小程序webapck插件 支持哪些特性? 仅需要配置entry 指向app.js即可 例如 entry:'./app.js' 支持node_modules 模块引用 支持node_modules 组件引用 node_modules平行移植 ...
webpack4-cdn-plugin:上传 webpack 资源到 cdn，允许重命名散列资源
05-31
webpack4-cdn-插件 将您的 webpack 生成的资产上传到 CDN，允许重命名/重新哈希。 要求和重要说明 Node 8+ （支持async/await ）是必需的推荐。 此插件尚未在Windows平台上进行测试。 此插件仅支持webpack@4 。 ...
webpack-使用webpack-dev-server.rar
04-12
它在开发过程中将各种资源（如 JavaScript、CSS、图片等）视为模块，并根据依赖关系进行编译和打包。`webpack-dev-server` 是 Webpack 提供的一个本地开发服务器，它极大地提高了前端开发效率，因为它提供了实时重载...
src=“[object Module]“ 的原因及解决方案
weixin_38728902的博客
04-16 2980
使用webpack4构建的项目，出现 src="[object Module]" 的原因及解决方案。 Vue官方文档中说了vue-loader的基本原理，他会将Vue模板中的 转为下面这段JS代码： createElement('img', { attrs: { src: require('../image.png') // require()是CommonJS模块语法 } }) 对于图像我们在Webpack中一般使用 url-loader 来处理 { test: /\.(
使用webpackd的url-loader获取不到图片地址出现src=“[object Module]“ 问题
u011608672的博客
01-15 762
webpacke渲染的页面获取不到图片地址问题 代码设置地址相对路径获取图片 页面渲染出现src="[object Module]" 出现问题 webpack.config.js中加载器url-loader的设置问题 原url-loader设置如下 module: { // 这个节点，用于配置 所有 第三方模块 加载器 rules: [ // 所有第三方模块的 匹配规则 { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loa
webpack处理Img标签路径的几种情况
weixin_33736649的博客
07-22 739
在使用webpack过程中遇到这个问题，各种搜索遇到此问题的还真不少，但都没有一个完整的说明。 后来研究下，图片除了路径替换还是就是图片做优化主是小于一定大小的通过转 base64 inline方式减少请求，另外就是通过image-webpack-loader插件图片压缩 1、静态文件.html中图片路径替换 2、React.js组件中的img标签中径处理 详细的代码说明放在github上...
webpack打包4之处理img
qq_40922656的博客
09-03 343
webpack不认识图片需要配置转换图片的loader来处理。主要用到的loader有url-loader和file-loader。 1、下载依赖包 yarn add url-loader file-loader -D 2、配置loader module: { rules: [ { test: /\.(png|jpg|gif)$/i, use: [ { loade
webpack学习笔记（六）：图片打包处理
Hoshizola的博客
12-13 1468
本片文章将记录webpack中如何处理图片的打包问题。在介绍图片打包处理之前，先说明一下引入图片的三种方式： 使用背景图片：将一个包裹图片的元素的css中的background属性设置为图片路径 使用js导入：可以使用commonJS规范引入图片资源 const imgUrl = require('图片路径') 图片的dom对象.src=imgUrl 使用img标签：<img src= '图片路径'> 使用背景图片 先准备一张图片资源： index.html中添加代码： 在inde
angular + img 的src 利用 require访问的时候，路径为[object module]
qq_42977016的博客
06-22 1079
angular可以使用[src]的方式来动态添加图片资源 test.html <img [src]="logo" [alt]="desc"> test.ts logo = require('../../../assets/image/logo.png') 问题出现：图片引入失败，打开文件看到 引入的是[object Module]，找了一圈答案，大概是由于loader的版本导致的问题，那么由于用angular-cli构建的项目，没有暴露webpack的配置出来。所以利用改变配置的方式
webpack html img src,javascript - Img src not updated with publicPath using HtmlWebpackPlugin templa...
weixin_39824529的博客
06-19 90
I am trying to generate a more ore less static html page using HtmlWebpackPlugin and Handlebars. Where everything works like a charm, using templateContent (function) instead of template (path) as an ...
webpack5打包样式文件、html、jsx中的图片
qq_45327886的博客
03-21 698
webpack5 打包图片 图片无法正常打包 [object%20Module]
Webpack打包CSS图片，HTML图片，JS图片
weixin_46273011的博客
04-05 754
CSS图片打包 图片如果是通过网址，服务器上的，那么webpack可以则跳过，不需要去被识别。包和环境配置跟上篇的CSS打包一样 但是如果是本地图片，那么需要识别，这时候要借助loader 安装包 file-loader npm install --save-dev file-loader@6.0.0 所有包情况package.json { "name": "webpack-js-img", "version": "1.0.0", "description": "", "m.
webpack打包使用 terser-webpack-plugin删除console.log不生效
最新发布
09-06
你好！关于你的问题，我可以提供一些帮助。要在 webpack 打包过程中使用 `terser-webpack-plugin` 删除 `console.log`，你需要确保已正确配置和使用该插件。以下是可能需要检查的几个步骤： 1. 确保已安装 `terser-webpack-plugin`。可以通过运行以下命令来安装它： ``` npm install terser-webpack-plugin --save-dev ``` 2. 在 webpack 配置文件中，确保引入 `terser-webpack-plugin`： ```javascript const TerserPlugin = require('terser-webpack-plugin'); ``` 3. 在 optimization 配置中，添加 `TerserPlugin`： ```javascript optimization: { minimizer: [ new TerserPlugin({ terserOptions: { compress: { drop_console: true // 删除 console.log } } }) ] } ``` 4. 确保 webpack 配置文件中其他的配置项没有影响到插件的执行。特别是注意是否存在其他插件或配置与 `TerserPlugin` 冲突。 完成上述步骤后，重新运行 webpack 打包命令，应该就能够删除代码中的 `console.log` 了。如果问题仍然存在，可以提供更多关于你的 webpack 配置文件的信息，以便我能够更具体地帮助你解决问题。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值