使用 React 导入图像

介绍

在使用 React 开发 Web 应用程序时，我们通常希望包含视觉元素来捕捉用户的兴趣。 这些视觉元素可以是任何类型的图像，包括 JPG、PNG、SVG、GIF 等等。

在本文中，我们将学习如何使用 React 导入图像，并了解可以实现的各种方法。

外部图像和本地图像是我们想要在 React 应用程序中使用的两种类型的图像。 在本文中，我们主要关注本地图像，因为外部图像不需要我们导入它们。

外部图像是已经在外部托管的图像，任何人都可以通过 URL 访问，而本地图像是仅在我们的本地计算机或项目文件夹上可用并且我们希望在应用程序中使用的图像。

如何显示外部托管的图像

在我们了解如何导入图像之前，重要的是要了解托管在其他地方的图像的工作方式与我们一直在 HTML 中使用图像的方式相同——通过将 URL 添加到 src 的属性 img 标签：

const App = () => {
   return (
      <div>
         <img src="https://reactjs.org/logo-og.png" alt="React Logo" />
      </div>
   );
};

现在让我们学习如何使用 React 导入（本地）图像！

如何使用 React 导入图像

除了外部图像之外，React 中使用图像的方式与其他框架甚至 HTML 有很大不同。 这些图像必须先导入 React，然后才能在我们的应用程序中使用。

这可以通过两种方式实现：通过使用 import 声明或通过使用 require() 功能。 我们将讨论这两种方法。

如何使用 React 导入图像 进口 个人陈述

因为它更容易阅读和理解， import 语句是 React 中导入本地存储图像最常用的方法。 图像被视为 默认导出，当我们导入它们时，我们以与导入组件相同的方式进行。 这是通过指定从文件到我们正在导入的图像的相对路径来完成的：

import Logo from './images/react-logo.png';

const App = () => {
   return (
      <div>
         <img src={Logo} alt="React Logo" />
      </div>
   );
};

在上面的代码中，我们仍然使用 img 标记和 src 属性，但这次 src 属性接收一个变量而不是一个字符串，它在 JSX 中使用花括号传递。

请注意： 我们可以导入任意数量的图像，但是每个图像在导入语句中必须有一个唯一的名称，否则会抛出错误。

了解如何指定和获取文件的相对路径很重要； 否则，可能会出现错误和错误。 在前面的示例中，图像保存在 /src/images.

如何使用 require() 函数通过 React 导入图像

require() function 是一个 Node.js 函数，用于包含来自当前文件以外的文件的外部模块。 它的工作方式与 import 声明并允许我们包含图像：

let Logo = require('./images/react-logo.png');

const App = () => {
   return (
      <div>
         <img src={Logo} alt="React Logo" />
      </div>
   );
};

唯一的区别是第一行我们通过其相对路径需要图像，然后将其存储在一个变量中，我们在 img 通过花括号标记。

我们还可以决定内联执行此操作并避免用于将图像分配给变量的额外行，因为它不是强制性的：

const App = () => {
   return (
      <div>
         <img src={require('./images/react-logo.png')} alt="React Logo" />
      </div>
   );
};

结论

我们学习了如何使用 import 声明和 require() 本文中的功能。