最近在前端项目开发中，使用 Webpack 打包时遇到了一个问题：图片路径出错。在本文中，我们将深入探讨这个问题的原因，并提供解决方法和示例代码。
问题描述
在使用 Webpack 进行打包时，如果对于图片的路径设置有误，就会出现路径错误的问题。例如：
import imgSrc from './assets/img/logo.png'
// ...
<img src={imgSrc} alt="logo" />这段代码将导致如下的错误：
GET http://localhost:8080/img/logo.png 404 (Not Found)
问题原因
这个问题的原因在于，当 Webpack 执行打包时，它会将所有的代码和资源打包到一个或多个输出目录中。所以，它会按照指定的 Image path （图片路径）将所有的图片放到输出目录中。但如果在打包过程中，指定的图片路径有误，就会导致图片找不到。
解决方法
方法一：使用绝对路径
解决方法一：可以通过在 Image path（图片路径）前添加 __dirname 或者 /，将路径设置为绝对路径来解决问题：
import imgSrc from `${__dirname}/assets/img/logo.png` // 或者
import imgSrc from `/assets/img/logo.png`方法二：使用 Webpack 引用插件
解决方法二：可以使用 Webpack 引用插件，例如 html-webpack-plugin 或 copy-webpack-plugin，来指定正确的图片路径。
1. html-webpack-plugin
如果使用 html-webpack-plugin，我们可以指定相对路径作为 Image path（图片路径）：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- ---- - ----------------
-------------- - -
-- ---
-------- -
--- -------------------
--------- ----------------------- ---------------------
--------- -------------
--------- -----------------------
--
-
--在 HTML 文件中，我们可以这样设置图片路径：
<img src="<%= htmlWebpackPlugin.options.imageSrc %>" />
2. copy-webpack-plugin
如果使用 copy-webpack-plugin，我们可以指定正确的图片路径，例如：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- ---- - ----------------
-------------- - -
-- ---
-------- -
--- -------------------
-
----- ---------------
--- ------
------ ----
-
--
-
--这段代码将我们的图片拷贝到 dist 目录中，并可以正确的访问。
总结
在 Webpack 打包过程中，图片路径出错是常见问题之一。本文提供了两种解决方法：使用绝对路径和使用 Webpack 引用插件，可以根据自己的需求选择适合自己的解决方法来解决图片路径出错的问题。希望本文可以帮助读者解决类似的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64670de8968c7c53b0775d13