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