在开发现代 Web 应用程序时，图片和图标是不可或缺的一部分。 Next.js 是一个 React 框架，它提供了许多特性，让我们更快地开发 Web 应用程序。在本篇文章中，我们将研究如何在 Next.js 应用程序中使用图像和图标，同时提供示例代码以及深入的学习指导。
图像
在 Next.js 应用程序中使用图像很简单。我们可以像以下一样导入图像文件：
-- -------------------- ---- -------
------ ----- ---- ------------
-------- --------- -
------ -
------
-------------------
------- ------
-----------
------------
--
-
-Next.js 使用一个内置的 Image 组件，它可以在运行时自动将图像优化为 WebP 格式，并提供一些额外的功能。例如，它可以自动调整图像的大小，以适应所在的容器。
当您使用 <Image> 标记添加图像时，Next.js 会在应用程序构建时自动优化图像。它会生成多种分辨率的图像，并选择最合适的分辨率来传递给用户。
如果您要跨组件共享图像，则应在 /public 文件夹中创建一个文件夹。例如，如果图像位于 public/images/my-image.jpg 中，则可以在组件中像这样使用图像：
-- -------------------- ---- -------
-------- --------- -
------ -
------
--------------------------
------- ------
-----------
------------
--
-
-这段代码会自动加载 /public/images/my-image.jpg，因为图像目录在 /public 文件夹下。
图标
在 Web 开发中，图标通常用作按钮、标签和菜单项等组件中的可交互元素。使用 SVG 绘制图标并进行优化是一种广泛使用的最佳实践，因为 SVG 可缩放矢量图象，可以在不损失清晰度的情况下以任意大小呈现。
下面是一个可以用作 Next.js 应用程序中“向上”箭头的 SVG 图标：
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5.33329 8.66664L8.00001 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M8.00001 9.33331L8.00001 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M10.6667 3.99998L8.00001 6.66665L5.33334 3.99998" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg>
您可以将此 SVG 图标保存在一个单独的 .svg 文件中。在下面的示例中，我们将 .svg 文件保存在 /public/icons 文件夹中。
然后，我们可以像导入其他文件一样在 Next.js 应用程序中导入它：
-- -------------------- ---- -------
------ ------ ---- -----------------------------
-------- ------------- -
------ -
--------
------- --
------ -- ---
---------
-
-结论
在本文中，我们学习了如何在 Next.js 应用程序中使用图像和图标。我们提供了一些示例代码，让您能够更快、更容易地使用这些功能。希望这篇文章能为您提供一些深入的学习和指导，并帮助您更好地开发 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672362cd2e7021665e0fd8cf