React img src

Irakli Tchigladze 2023年1月30日 2022年5月18日
  1. 在 React 中使用 create-react-app 包引用本 Map 像
  2. 在 React 中使用 import 语句加载图像
  3. 使用 React 中的 require() 方法加载图像
  4. 在 React 中 importrequire() 如何工作
React img src

如果你是 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 相对文件路径。一旦部署了应用程序,你尤其不能依赖本地路径名。相反,开发人员必须使用 importrequire() 语句来加载图像。

在开发 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 就应该显示一个图像。

React img src

在这种情况下,路径有效,因为 testComponentassets 文件夹都位于 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 中 importrequire() 如何工作

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

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

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