如何使用import 语句和require() 函数导入本地图片

简介

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

在这篇文章中，我们将学习如何用React导入图片，并看到可以实现的各种方式。

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

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

如何显示外部托管的图像

src 在我们讨论如何导入图片之前，重要的是要了解在其他地方托管的图片与我们在HTML中使用图片的方式相同--通过将URL添加到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语句

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

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

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

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

注意：我们可以导入任意多的图片，但每张图片在导入语句中必须有一个唯一的名称，否则会产生错误。

了解如何指定和获得文件的相对路径是很重要的，否则可能会出现bug和错误。在前面的例子中，图片被保存在一个/src/images 。

如何使用require()函数用React导入图片

require() 函数是一个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() 函数导入本地图片。