在 React 项目中，我们经常需要引入图片文件，比如 logo、背景图等等。然而，当使用 Webpack 打包项目时，有时候会遇到图片文件 404 的问题。这篇文章将会介绍如何解决这个问题。
为什么会出现图片文件 404 的问题？
在 Webpack 打包项目时，会将所有的资源文件都打包到一个 bundle.js 文件中。如果我们在代码中引入了图片文件，那么这个图片文件也会被打包到 bundle.js 中。
但是，有时候我们在代码中引入的图片文件并不在同一个目录下，而是在另外一个目录下。这样，当我们打包项目时，Webpack 并不会自动将这个目录下的图片文件打包进去，导致最终生成的 bundle.js 文件中找不到这个图片文件，从而出现 404 错误。
解决方案
方案一：使用 file-loader 或者 url-loader
file-loader 和 url-loader 都是 Webpack 的 loader，可以将文件打包成 base64 编码或者将文件复制到输出目录中，并返回文件路径。
使用 file-loader 或者 url-loader 可以将图片文件打包到输出目录中，并在最终生成的 bundle.js 文件中引用这个图片文件的路径，从而避免了 404 错误的问题。
安装 file-loader 或者 url-loader：
--- ------- ----------- ----------
或者
--- ------- ---------- ----------
在 webpack.config.js 中配置 loader：
-------------- - -
------- -
------ -
-
----- --------------------
---- -
-
------- --------------
--
--
--
--
--
--或者
-------------- - -
------- -
------ -
-
----- --------------------
---- -
-
------- -------------
-------- -
------ -----
--
--
--
--
--
--
--使用时，可以像这样引入图片：
------ ---- ---- --------------------
-------- ----- -
------ -
-----
---- ---------- ---------- --
------
--
-方案二：使用 require.context
require.context 是 Webpack 提供的一个方法，可以动态地获取指定目录下的所有文件。
使用 require.context 可以将图片文件打包到输出目录中，并在最终生成的 bundle.js 文件中引用这个图片文件的路径，从而避免了 404 错误的问题。
在代码中使用 require.context：
-------- ------------ - -------------------- - ------------------------------------- ----- -----------------------
使用时，可以像这样引入图片：
------ ---- ---- --------------------
-------- ----- -
------ -
-----
---- ---------- ---------- --
------
--
-总结
在 React 项目中，引入图片文件时，有时候会出现 404 错误的问题。解决这个问题的方法有两种：使用 file-loader 或者 url-loader，或者使用 require.context。无论使用哪种方法，都可以将图片文件打包到输出目录中，并在最终生成的 bundle.js 文件中引用这个图片文件的路径，从而避免了 404 错误的问题。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/650eba4595b1f8cacd7c7e55