在前端开发中，使用 webpack 打包时经常会遇到图片路径变成 [object Module] 的问题，这是因为 webpack 使用相对路径导入图片时，返回的是一个模块对象而非图片路径。在这篇文章中，我们将深入探讨这个问题并提供一些指导意义。
为什么会出现这个问题？
打包后的代码中，图片资源被转换为模块对象而被加载。在 JavaScript 中，加载模块对象时会返回一个 object 类型，而不是像引用本地图片时的字符串类型。因此，在浏览器中引用打包后的图片资源时，返回的是 [object Module] 而非实际路径。
解决方案
方案一：通过配置 file-loader 加载图片
在 webpack.config.js 中，使用 file-loader 配置图片资源的加载方式。file-loader 会将图片文件打包为输出文件夹中的实际文件，并返回生成文件的路径（或 URL）。
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ----------------------
---- -
-
------- --------------
-------- -
----- ---------------
----------- ---------
----------- ------------
--
--
--
--
--
--
--name 指定输出文件的名称，outputPath 指定输出文件的路径，publicPath 指定浏览器访问文件的路径。
方案二：使用 url-loader 加载图片
url-loader 可以将图片文件打包为 base64 编码的字符串，这样可以减少对服务器的请求，提高页面加载速度。
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ----------------------
---- -
-
------- -------------
-------- -
------ -----
----- ---------------
----------- ---------
----------- ------------
--
--
--
--
--
--
--limit 限制以 byte 为单位的最大资源大小，超过该大小就会使用 file-loader 进行打包；否则使用 base64 编码的字符串返回。
方案三：使用相对路径
在项目中，可以使用相对路径的方式来引用图片资源。相对路径是相对于当前文件所在的目录的路径，例如 '../images/logo.png'。相对路径方式需要注意组织结构和文件名的正确性，同时当组件嵌套层次变深时，相对路径的计算也会变得复杂，需要更多的考虑。
总结
以上就是解决 webpack 打包后图片路径变成了 [object Module] 的问题的三种方案。我们可以根据项目需要做出选择。不论我们选择哪种方案，我们都应该时刻注意良好的文件结构和文件名，以便在开发过程中正确引用和管理图片资源。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659e660aadd4f0e0ff75dce8