使用 React 導入圖像

簡介

在使用 React 開發 Web 應用程序時，我們通常希望包含視覺元素來捕捉用戶的興趣。這些視覺元素可以是任何類型的圖像，包括 JPG、PNG、SVG、GIF 等等。

外部圖像和本地圖像是我們想要在 React 應用程序中使用的兩種類型的圖像。我們在本文中主要關注本地圖像，因為外部圖像不需要我們導入它們。

外部圖像是已經在外部託管並且任何人都可以通過 URL 訪問的圖像，而本地圖像是僅在我們的本地計算機或項目文件夾上可供我們使用並且我們希望在我們的應用程序中使用的圖像。

如何顯示外部託管的圖像

在我們了解如何導入圖像之前，重要的是要了解託管在其他地方的圖像的工作方式與我們一直在 HTML 中使用圖像的方式相同 - 通過將 URL 添加到 src img 的屬性 標籤：

const App = () => {
   return (
      <div>
         <img src="https://reactjs.org/logo-og.png" alt="React Logo" />
      </div>
   );
};

現在讓我們學習如何使用 React 導入（本地）圖像！

如何使用 React 導入圖片

除了外部圖像之外，React 中使用圖像的方式與其他框架甚至 HTML 有很大不同。這些圖像必須先導入 React，然後才能在我們的應用程序中使用。

這可以通過兩種方式完成：使用 import 語句或使用 require() 功能。我們將介紹這兩種方法。

如何使用 React 導入圖像 import 聲明

因為它更容易閱讀和理解，import 語句是 React 中導入本地存儲圖像最常用的方法。圖片被視為默認導出 ，並且當我們導入它們時，我們以與導入組件相同的方式這樣做。這是通過指定從文件到我們正在導入的圖像的相對路徑來完成的：

import Logo from './images/react-logo.png';

const App = () => {
   return (
      <div>
         <img src={Logo} alt="React Logo" />
      </div>
   );
};

在上面的代碼中，我們仍然使用 img 標籤和 src 屬性，但這次是 src 屬性接收變量而不是字符串，在 JSX 中使用花括號傳遞。

注意： 我們可以導入任意數量的圖像，但每個圖像在導入語句中必須有一個唯一的名稱，否則會拋出錯誤。

了解如何指定和獲取文件的相對路徑很重要；否則，可能會出現錯誤和錯誤。在前面的示例中，圖像保存在 /src/images .

如何通過 React 使用 require() 函數導入圖片

require() function 是一個 Node.js 函數，用於包含來自當前文件以外的文件的外部模塊。它的工作方式與 import 相同 聲明並允許我們包含圖片：

let Logo = require('./images/react-logo.png');

const App = () => {
   return (
      <div>
         <img src={Logo} alt="React Logo" />
      </div>
   );
};

唯一的區別是第一行我們通過其相對路徑需要圖像，然後將其存儲在我們在 img 中訪問的變量中 通過花括號標記。

我們還可以決定內聯執行此操作，並避免用於將圖像分配給變量的額外行，因為這不是強制性的：

const App = () => {
   return (
      <div>
         <img src={require('./images/react-logo.png')} alt="React Logo" />
      </div>
   );
};

結論

我們學習瞭如何使用 import 導入本地圖片 語句和 require() 本文的功能。