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 會在內部記錄元件與影象之間的關聯。之後，它將獲取資產，複製它，給它一個唯一的名稱並將它放在伺服器上的可訪問目錄中。