在 React 组件中导入图像

Irakli Tchigladze 2023年1月30日 2022年5月18日
  1. 在 React 中使用图像链接显示外部托管图像以导入图像
  2. 在 React 中使用 import 语句导入图像
  3. 在 React 中使用 require() 函数导入图像
在 React 组件中导入图像

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

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

大多数现代 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")} />
  }
}
Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn

相关文章 - React Image