在 React 组件中导入图像

1. 在 React 中使用图像链接显示外部托管图像以导入图像
2. 在 React 中使用 import 语句导入图像
3. 在 React 中使用 require() 函数导入图像

视觉内容的消费促使数十亿互联网用户每天访问他们最喜欢的网站。

在决定构建应用程序的技术堆栈时，开发人员应考虑技术和视觉内容的兼容性，例如图像。

大多数现代 JavaScript 框架都为你提供了在应用程序中导入和特征图像的很大自由度。作为用于构建动态 JavaScript 应用程序的最流行的框架之一，React 也不例外。

它允许你展示来自本地和外部来源的图像。在本文中，我们想讨论在 React 应用程序中合并图像。

要选择在 React 中导入图像的最佳方法，你必须考虑某些因素。

最重要的因素是你的 webpack 配置（以及一般的环境设置）、项目结构以及你是否在本地托管应用程序。

在 React 中使用图像链接显示外部托管图像以导入图像

让我们从最简单的情况开始，使用它们的链接显示外部托管的图像。让我们看一个示例代码。

class App extends Component {
  render() {
    return <img src="https://reactjs.org/logo-og.png" />
  }
}

我们有一个简单的应用程序组件，它只返回一个 <img> 元素。我们使用 src 属性来指定图像的链接。

你可以查看 playcode 上的实时示例。

具有本地存储的图像有点困难。

在 React 中使用 import 语句导入图像

import 语句是在 React 中导入本地存储图像的最简单和最易读的方法。

让我们看看在本地存储时如何使用上一个示例中的图像。

import Logo from "../src/Reactlogo.jpg";
class App extends Component {
  render() {
    return <img src={Logo} />
  }
}

它看起来很简单。然而，在这段代码中有很多东西需要解压。

首先，我们将图像视为默认导出，并指定从文件到图像的相对路径。将最重要的图像存储在 src 文件夹中是一种惯例。

为了更好地理解如何编写相对路径，请阅读这篇文章。

在这个例子中，我们仍然使用 <img> 元素的 src 属性（不要与文件夹混淆）。然而，与上次不同的是，src 属性的值不是字符串；这是一个 Logo 变量。

出于这个原因，我们必须使用花括号来读取它的值。在 JSX 中，我们使用花括号来读取 JavaScript 变量的值，并且通常将表达式视为有效的 JavaScript 代码。

你可以根据需要导入任意数量的图像。但是，你必须在 import 语句中为它们提供唯一的名称。

在 React 中使用 require() 函数导入图像

require() 函数的作用与 import 语句相同；它允许你包含来自外部文件的外部模块。

让我们看看如何使用 require() 来展示前面示例中的相同图像。

let Logo = require("../src/Reactlogo.jpg")
class App extends Component {
  render() {
    return <img src={Logo} />
  }
}

语法略有不同，但正如我们所见，require() 函数的工作方式与 import 语句相同。该函数采用一个参数，即图像的相对路径。

与 import 语句不同，你还可以将 require() 函数用作内联值。让我们看一个例子。

class App extends Component {
  render() {
    return <img src={require("../src/Reactlogo.jpg")} />
  }
}