解决webpack5打包html中图片后图片无法显示问题

错误代码如下：

 //loader的配置module: {rules: [{test: /\.(png|svg|jpg|jpeg|gif)$/,loader: 'url-loader',},{ test: /\.html$/,loader: 'html-loader' }]},

此时打包好的html文件中的img标签路径（为错误路径）：

解决方案

------在尚硅谷的webpack5视频教程中有讲到，因为url-loader默认使用es6模块化进行解析，而html-loader使用的是commonjs进行解析，所以url-loader解析时会出错（见上面错误路径图片）。

方案一代码：

         {test: /\.(png|svg|jpg|jpeg|gif)$/,loader: 'url-loader',//禁用掉es模块options: { esModule: false }},//注意！！！！！！！！！！！！！！！！！！！！！！//此处使用webpack5支持的 "html-withimg-loader"，//如使用 "html-loader"，就算禁用了es模块还是会没用{ test: /\.html$/, loader: 'html-withimg-loader' }

成功后图片，可与上面的错误路径图片进行对比。

方案二代码:
使用webpack官方文档提供的方法，官方方法位置：指南—>管理资源—>加载images图像。

         {test: /\.(png|svg|jpg|jpeg|gif)$/i,type: 'asset/resource',},

最后欢迎留言讨论v( •̀ ω •́ )✧。

解决webpack5打包html中图片后图片无法显示问题相关推荐

Java踩坑笔记 —— base64转换为图片后图片显示不全
Java踩坑笔记 -- base64转换为图片后图片显示不全前言解决思路案例代码结束语前言最近在开发项目中,发现base64转换图片时,出现了图片显示不全,例如如下这样可以明显看到图片部 ...
html背景图总是在字的下面,怎么我在excel表格里插入背景图片后图片不是显示在文字下面而跑到文字右边的...
怎么我在excel表格里插入背景图片后图片不是显示在文字下面而跑到文字右边的以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧 ...
成功解决for循环语句中，后几次循环输出数据一直全部为空
成功解决for循环语句中,后几次循环输出数据一直全部为空目录解决问题解决思路解决方法解决问题 for循环语句中,后几次循环输出数据一直全部为空
解决 android手机ADB命令截图后图片显示为黑屏的方法-2020-01-07
title: adb命令截图图片显示为黑屏问题总结 date: 2020-01-07 tags: adb android author: YeXiaoXin 发现问题在我实际的项目开发过程中,发现a ...
jsp页面更换图片后，还是显示原来的图片解决方法！
当我们在jsp中更换原来的图片后,启动项目还是出现原来的图片,并且清除浏览器缓存没有任何作用我们打开 eclipse-workspace.metadata.plugins\org.eclipse. ...
记录 | Latex 双栏排版插入图片后图片太大的问题一种解决方案
问题描述使用某会议的latex模板(双栏)完成论文时,出现了插入图片特别大.无法调整大小的问题: latex代码 \documentclass[conference,a4paper]{XXX}... ...
(已解决)Latex--取消正文中参考文献引用的上标显示（gbt7714-2015会导致默认上角标引用)（上角标平齐标混合使用教程）
0 为什么有这个问题,因为我的中文论文无论采用\upcite{}还是\cite{}都是上角标这是因为GBT7714-2015宏包支持的标注样式:super / numbers / authorye ...
解决TreeView的节点更改NodeFont后无法完全显示节点名的问题
今天做树视图显示数据的时候,准备把树视图中第一级节点设成小四号粗体,第二级节点设成五号字体. 在代码中更改Node的字体字号以后,发现节点名的后半部分显示不出来 node.NodeFont = new ...
docker 挂载目录_完美解决：Docker部署SpringBoot项目后图片无法访问和上传，3招搞定！...
以前使用FTP在Linux中使用java -jar xxx.jar部署SpringBoot项目时,由于在项目中指定了主机文件存放路径映射,可以直接访问服务器的文件. 但是最近入坑Docker,将Spr ...
python打包代码中涉及的图片_pyinstaller打包程序带图片
首选说一下,这种打包方式只能在本电脑上使用运行正常准备:.py文件:你的程序 gif文件:你要用的图片第一步: 在上面文件所在目录打开cmd 输入 pyi-makespec FP.py 会生成一个 ...

解决webpack5打包html中图片后图片无法显示问题

解决方案

解决webpack5打包html中图片后图片无法显示问题相关推荐

最新文章

热门文章