在前端开发中，我们常常需要在页面中引入图片来美化网站或实现某些功能。但是在使用 ES6 的 import 语句引入图片时，会出现一些问题。本文将会对这些问题进行详细的说明，并提供解决方案。
问题描述
在 ES6 中，我们可以使用 import 语句来引入其他模块的代码。但是当我们要引入图片时，却会遇到一些问题。下面是一个使用 import 语句引入图片的例子：
import logo from './my-logo.png';
这个例子中，我们想要引入一个名为 my-logo.png 的图片。但是，当我们运行这段代码时，浏览器却会报错，显示无法找到该图片或该模块。这是因为 import 语句默认只能引入 JavaScript 模块，而不能引入其他类型的文件，如图片。
解决方案
为了解决这个问题，我们可以使用 url-loader 或 file-loader 来处理图片，然后使用 import 语句将处理后的图片引入到我们的代码中。下面分别介绍这两种解决方案。
使用 url-loader 处理图片
url-loader 是一个文件加载器，可以将文件以 base64 编码的格式嵌入到代码中，从而避免了对于图片的额外请求。我们可以在 webpack.config.js 中配置 url-loader，使其对图片文件进行处理：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ----------------------
---- -
-
------- -------------
-------- -
------ -----
--
--
--
--
--
--
--在这个例子中，我们配置 url-loader 对于所有以 .png、.jpg、.jpeg 或 .gif 结尾的图片文件进行处理。limit 表示当图片文件的大小小于 8192 字节时，url-loader 将自动将其转换为 base64 编码的格式嵌入到代码中。这里将该值设置为 8192 字节是因为当图片大小超过该值时，使用 base64 编码嵌入到代码中会导致代码体积过大，反而会降低网页加载速度。
处理完成后，我们可以使用 import 语句引入图片：
import logo from './my-logo.png';
这个例子中，我们已经成功地对图片进行了处理，并将其引入到了我们的代码中。
使用 file-loader 处理图片
file-loader 与 url-loader 类似，也可以将图片文件处理成模块，并将模块输出到指定目录中。我们同样可以在 webpack.config.js 中配置 file-loader，使其对图片进行处理：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ----------------------
---- -
-
------- --------------
-------- -
----- ---------------
----------- ----------
----------- -------------
--
--
--
--
--
--
--在这个例子中，我们配置 file-loader 对于所有以 .png、.jpg、.jpeg 或 .gif 结尾的图片文件进行处理。name 表示输出图片的名称，原名称以及后缀名将保持不变。outputPath 表示输出文件的路径，这里将其指定为 images/，表示将输出的图片放在项目根目录下的 images 文件夹中。publicPath 表示图片在网站中的真实路径，这里将其指定为 ../images/，表示网站中的图片路径是相对于当前文件的上级目录的 images 文件夹。
处理完成后，我们同样可以使用 import 语句引入图片：
import logo from '../images/my-logo.png';
这个例子中，我们已经成功地对图片进行了处理，并将其输出到了指定目录中。我们同样可以使用 import 语句引入该图片。
总结
在使用 ES6 的 import 语句引入图片时，会出现无法识别的问题。我们可以使用 url-loader 或 file-loader 来处理图片，并将处理后的图片引入到我们的代码中。url-loader 可以将图片处理成 base64 编码嵌入到代码中，而 file-loader 可以将图片输出到指定目录中。这两种解决方案都可以有效地解决在使用 ES6 的 import 语句中引入图片出现的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65027e7b95b1f8cacdfc55e0