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

最新推荐文章于 2024-06-25 18:07:12 发布

_tanzhiyong

最新推荐文章于 2024-06-25 18:07:12 发布

阅读量1.8k

点赞数 7

CC 4.0 BY-SA版权

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.youkuaiyun.com/rlrw_t/article/details/117992694

webpack 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在Webpack中处理图片路径错误的方法。通过调整url-loader配置及使用html-withimg-loader来确保图片路径正确加载，避免因模块化差异导致的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

错误代码如下：

	//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( •̀ ω •́ )✧。