React img src

1. 在 React 中使用 create-react-app 包引用本 Map 像
2. 在 React 中使用 import 语句加载图像
3. 使用 React 中的 require() 方法加载图像
4. 在 React 中 import 和 require() 如何工作

如果你是 React 的新手，你可能已经注意到 React 使用称为 JSX 的类似 HTML 的语法。这种语法提供了一种编写 React 应用程序的简单方法。在应用程序中包含图像时，事情变得有点混乱。与 HTML 不同，React 代码在显示给用户之前经历了许多更改。

从开发模式切换到生产模式时，图像的相对位置可能会发生变化。你需要一种可靠的方法来在 React 组件中导入和包含图像。

在 React 中使用 create-react-app 包引用本 Map 像

在开发 React 应用程序时，只要你的开发环境包含 webpack，你就可以轻松包含图像。使用 create-react-app 包时，会自动包含 webpack。

JSX 中的元素标签的工作方式与 HTML 中的相同——它是一个自闭合的 img 标签。开发人员可以使用 src 属性来指定路径。在这个例子中，<img/> 元素使用硬编码的图像 URL 作为源：

class App extends Component {
  render() {
    return <img src="https://cdn.pixabay.com/photo/2021/09/02/16/48/cat-6593947_960_720.jpg"/>
  }
}

如果要指定文件夹内图像位置的相对路径，事情会变得稍微复杂一些。为图像提供源并不像将 src 属性设置为计算机上的相对文件路径那么简单。首先，沙盒浏览器无法访问你计算机的 src 相对文件路径。一旦部署了应用程序，你尤其不能依赖本地路径名。相反，开发人员必须使用 import 或 require() 语句来加载图像。

在开发 create-react-app 项目时，最好有一个资产文件夹来存储所有图像。通常，此文件夹创建在项目的 src 文件夹中。假设你遵循此约定来存储图像，让我们看看如何导入和使用图像作为 src 属性的值。

在 React 中使用 import 语句加载图像

你还可以使用 import 语句来加载图像。它看起来很简单，并且实现了与硬编码 url 相同的目标：

import React, { Component } from "react";
import image from "./assets/cat.jpg";
export default class testComponent extends Component {
  render() {
    return (
      <div>
        <img src={image} />
      </div>
    );
  }
}

只要你提供了一个有效的路径，你的 create-react-app 就应该显示一个图像。

在这种情况下，路径有效，因为 testComponent 和 assets 文件夹都位于 src 文件夹中。路径的结尾 - cat.jpg 只是单个文件的名称。

import 语句提供了将导入的资产存储在变量中的额外好处。为 src 属性设置值时，你可以从导入语句中引用变量名称。 <img src={image} />

你可以阅读有关导入的更多信息此处。

使用 React 中的 require() 方法加载图像

React 开发人员使用 require() 方法来加载各种类型的模块。它也可以用于加载图像。

如果你想在 JSX 中使用它，require() 方法必须放在大括号之间。你可能知道，花括号之间的代码在 JSX 中被解释为有效的 JavaScript。

<img src={require("./assets/cat.jpg").default} />

require() 方法接受一个参数，即图像的有效相对路径。另请注意，你必须在某些浏览器中访问返回对象的 .default 属性。

或者，你可以创建一个 image 变量来存储你的图像，然后在你的组件中引用它。下面是一个例子：

const image = require("./assets/cat.jpg").default;
export default class testComponent extends Component {
  render() {
    return (
      <div>
        <img src={image} />
      </div>
    );
  }
}

你可以随意命名变量。它不必被称为图像。

请记住，如果你想在 React 中引用 JavaScript 变量，则必须将其括在花括号中。

require() 方法和 import 语句在性能方面没有区别。

在 React 中 import 和 require() 如何工作

一些 React 开发人员可能会惊讶于 webpack（和其他打包器）处理图像加载，而不是 JavaScript 或 React。

当你在组件中加载图像时，bundle 会在内部记录组件与图像之间的关联。之后，它将获取资产，复制它，给它一个唯一的名称并将它放在服务器上的可访问目录中。