4-1 webpack处理HTML内嵌图片（以及错误解决）

最新推荐文章于 2022-01-16 15:55:30 发布
最新推荐文章于 2022-01-16 15:55:30 发布
阅读量624 收藏
点赞数 1
分类专栏： webpack学习 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xt_123456/article/details/106186556
版权
本文介绍了如何使用webpack解决HTML内嵌图片路径错误的问题。通过安装html-loader，配置webpack.config.js，并进行打包操作，可以确保图片正确显示。需要注意的是，由于webpack的版本更新，html-loader的配置方式有所改变，老的配置方法可能会导致错误。
摘要由CSDN通过智能技术生成

在html中引入图片时，比如：

	<body>
		<img src="Show.jpg">
	</body>

如果不使用loader，就会出现路径错误，图片不显示的情况：
在这里插入图片描述
经过loader处理后，图片就可以正常显示了。

具体步骤

1.安装html-loader
打开终端，进入到项目文件夹路径，输入命令cnpm install --save-dev html-loader
2.配置webpack.config.js文件
在module.exports = {}里的module中的rules里配置：

最低0.47元/天 解锁文章
xt_123456
关注
专栏目录
vue-cli全家桶脚手架项目构建工具webpack3升级4
id_no_chinese的博客
12-19 809
因为vue全家桶vue-cli2.0仅支持 webpack3.6.0.需要手动升级 webpack4 提升打包效率。 1.手动升级 webpack webpack-cli(webpack4需要项目依赖中安装该依赖)。 "webpack": "^4.26.0", "webpack-bundle-analyzer": "^3.6.0", "webpack-cli": "^3.3.10", "web...
vue2项目实战打包优化（webpack）
ShIcily的博客
12-13 1312
一、打包后去掉console和警告（uglifyjs-webpack-plugin） 优化方案：修改build文件夹中webpack.prod.conf.js的内容如下： new UglifyJsPlugin({ uglifyOptions: { compress: { unused:true, //是否去掉未关联的函数和变量 warnings: t...
前端开源库-html-beautify-webpack-plugin
08-30
前端开源库-html-beautify-webpack-pluginHTML美化Webpack插件，用于美化JS的适配器作为Webpack插件，与htmlWebpackPlugin链接
前端必学内容：webpack3快速入门 1-23节内容参考
weixin_34272308的博客
12-11 328
前端必学内容：webpack（模块打包器） webpack3 学习内容，点击即可到达 (1).webpack快速入门——如何安装webpack及注意事项 (2).webpack快速入门——webpack3.X 快速上手一个Demo (3).webpack快速入门——配置文件：入口和出口，多入口、多出口配置 (4).webpack快速入门——配置文件：服务和热更新 (5).web...
webpack解析html中图片,[vue]webpack打包
weixin_36280317的博客
06-04 286
前端打包是什么概念呢? 咱们用webpack工具对js,css,甚至图片进行打包.javascriptes6的语法js模块化用法(仅支持chrome)按照py的逻辑,诸多的js被main.js调用,而后在html引入,就能够实现js的模块化开发,(互相的导入使用es6的语法), 谷歌浏览器能够识别es6,可是其余的浏览器就不怎么好使了. 大概是如下的一个逻辑.es6的导入须要注意的几个问题css ...
webpack踩坑二：解析html中的图片
i'm cool 的博客
05-07 390
错误经历：安装了html-loader,html-webpack-plugin，使用了html模板，导致html图片不能解析 这里的img不能在页面中正确的解析出现 解决方案： 1.去掉配置中的html-loader 2.html模板中图片路径采用ejs引入 页面成功显示图片 ...
html中的图形插件,webpack--插件配置：处理HTML中的图片(七)
weixin_39647734的博客
06-04 216
目录结构beforeafter更改打包命令package.json就可以使用npm run build 代替webpack"scripts": {"server": "webpack-dev-server","build": "webpack"},修改index.html html-withimg-loader安装依赖可以直接安装在dev环境cnpm install html-wit...
webpack4性能优化小结——HMR、source-map、oneOf、babel缓存、 多进程打包、文件缓存、tree shaking、code split、dll、pwa、externals
猛猛的博客
01-16 1012
webpack性能优化： 开发环境性能优化 1）优化打包构建速度 —— HMR 2）优化代码调试—— source-map 生产环境性能优化 1）优化打包构建速度——oneOf、babel缓存、 多进程打包 2）优化代码运行的性能——文件缓存、tree shaking、code split、dll、懒加载和预加载、pwa、externals 开发环境配置–优化打包构建的速度 使用HMR（hot module repalcement），热模块替换，作用是一个模块发生改变，只会重新打包这个模块，而不是全部更
Webpack ExtractTextPlugin错误分析及解决示例
这表明插件在处理多入口文件的CSS提取时出现了逻辑错误，导致了资源的错误合并。这可能会影响到最终生成的文件名的一致性，进而影响到浏览器缓存的正常工作，因为浏览器通常会根据文件名来识别并缓存静态资源。 要...
html模块化嵌套页面,webpack4 将html 模块化
weixin_42330839的博客
06-04 275
前言webpack处理组件中的模板文件有两种方式：1.将模板文件当做一个字符串。比如html-loader：将HMTL模板文件当做一个string输出。2.将模板文件当做一个已经编译好的模板函数。比如ejs-loader：将EJS模板文件当做一个函数输出。html-loader 示例1.安装依赖：npm i -D html-loader2.建立模板文件，目录为：● layer.xml，后缀也可以是...
Webpack如何打包html图片
KevinMiGuan的博客
10-23 1617
1.安装npm i -D html-loader 和 npm install url-loader --save-dev; 2.在webpack.config.js里的module模块引入如下代码： {                 test: /\.(png|svg|jpg|gif)$/i,                 loaders: [                     'u...
webpack4:使用html-withimg-loader 打包html中的图片标签出现问题
业余前端的职业经历
02-28 4496
那是和html-webpack-plugin 发生了冲突 同时也因为 file-loader版本升级了 如果你的file-loader 版本是 5.* 那就应该是了 在webpack.config.js中 { test:/\.(html|htm)$/i, use:'html-withimg-loader', // 解析 html中的图片资源 }, { test:/\.(pn...
webpack解析html中图片,10. vue之webpack打包详解
weixin_31975737的博客
06-04 494
一、什么是webpackwebpack官网给出的定义是本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。如上图: 中间的蓝色块就是webpack. 他...
webpack 处理html中img的src引入的图片
热门推荐
wzs_xyz的专栏
06-23 3万+
webpack在管理模块，处理各种资源上都是无往不利，但唯独在处理html上比较困难，不识别html中img标签src引入的图片。 html-webpack-plugin这种插件辅助处理html非常好，但却仍然未解决html代码中的图片问题，未免美中不足。在遍寻开源模块无果后，认真研究webpack的loader和plugin后，终于解决了这个问题。从npm安装模块npm i html-withi
webpack 中 对html 中的图片 img进行处理
hjh15827475896的博客
01-11 4806
webpack 对css中的 url(./path..) 处理的时候使用的是 file-loader url-loader ,这是处理css文件中引用的图片，那么，在html中引用了图片用什么来进行处理呢 这里来说一下 html-loader html-loader 就是用来处理 html中的图片的 可以对图片进行压缩等优化的操作 命令行安装 npm install html-loade...
webpack基础 -- 处理html中引入的图片
彩虹
07-31 3639
使用: html-loader options: { attrs:[img:src] } &lt;\img src=”src/assets/img/demo.png” data-src=”src/assets/img/demo1.png” /&gt;’ webpack 配置 rules:[ { test:/\.(png|jpg|jpeg|gif)$/, ...
4、webpack快速入门——配置文件：服务和热更新
你的才华撑不起野心时，静下心学习；你的能力驾驭不了目标时，沉下心努力
02-06 443
    1.在终端安装 cnpm i webpack-dev-server --save-dev 2.配置好后执行 webpack-dev-server，这时候会报错 出现错误，只需要在pagejson里配置下scripts就可以了    3.下载好后，需要配置下devServer const path = require('path'); //引入path modul...
webpack打包项目教程(还是遇到了打包后背景图片不显示的深坑以及html中的img不显示的问题，爬了一天多才豁然开朗)
李小乐er
01-19 1万+
首先，在确认已经安装好nodejs、npm、webpack后新建一个文件夹，这里我建的文件夹名为logined。不知道webpack怎么安装的可以看我写的上一篇，webpack安装配置以及填坑操作。mkdir logined用编辑器打开该文件夹所在路径，然后创建一个js文件夹 在js文件夹下建一个index.js文件然后敲命令webpack index.js bundle.js这样通过打包就在bu
webpack打包html中img标签引入的图片遇到的问题
lscheng的博客
10-18 1895
解决Automatic publicPath is not supported in this browser问题 一、起因 最近在学习webpack之时遇到了这个问题，问题是出现在学习打包html中的img标签之时，根据教程打，教程的loader配置是这样的 { test:/\.(jpg|png|gif)$/, //多个loader时，使用use，一个时可以直接使用loader //下载
vue-cil与webpack本地静态图片路径解决策略
解决Vue CLI和Webpack中本地静态图片路径问题的关键在于组织好文件结构，合理配置路径处理机制，并针对CSS的特殊情况应用适当的插件。通过这些方法，可以确保在开发和生产环境中图片资源都能顺利加载。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值