在 React 元件中匯入影象

1. 在 React 中使用影象連結顯示外部託管影象以匯入影象
2. 在 React 中使用 import 語句匯入影象
3. 在 React 中使用 require() 函式匯入影象

視覺內容的消費促使數十億網際網路使用者每天訪問他們最喜歡的網站。

在決定構建應用程式的技術堆疊時，開發人員應考慮技術和視覺內容的相容性，例如影象。

大多數現代 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")} />
  }
}