加入圖片、字體和檔案

由於 webpack 的使用，靜態資源（例如圖片和字體）的運作方式類似 CSS。

您可以直接在 JavaScript 模組中導入一個檔案。這會指示 webpack 將該檔案包含在資源包中。與 CSS 導入不同的是，導入檔案會提供給您一個字串值。此值是您可以在程式碼中引用的最終路徑，例如身為圖片的 src 屬性或 PDF 連結的 href。

為減少對伺服器的要求數量，導入大小小於 10,000 位元組的圖片時，會回傳一個資料 URI，而非路徑。這適用於下列檔案副檔名：bmp、gif、jpg、jpeg 和 png。由於 #1153，SVG 檔案已被排除在外。您可以透過在進階設定中所記載的設定 IMAGE_INLINE_SIZE_LIMIT 環境變數來控制 10,000 位元組的臨界值。

以下是一個範例

import React from 'react';
import logo from './logo.png'; // Tell webpack this JS file uses this image

console.log(logo); // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}

export default Header;

這樣做可以確保在建置專案時，Webpack 會正確將圖片移至建置資料夾，並為我們提供正確的路徑。

這也會在 CSS 中運作

.Logo {
  background-image: url(./logo.png);
}

Webpack 會在 CSS 中找到所有相對模組參考（它們以 ./ 開頭），並將它們替換為經過彙編的套件中的最終路徑。如果你打錯字或不小心刪除重要檔案，你可以看到一個編譯錯誤，就像你匯入一個不存在的 JavaScript 模組時一樣。經彙編的套件中的最終檔名是 Webpack 從內容雜湊中生成的。如果檔案內容在未來改變，Webpack 會在產品環境中給它一個不同的名稱，所以你不用擔心資產的長期快取。

請注意，這也是 Webpack 的自訂功能。

對於 React 並非必要，但許多人喜歡它（而且 React 原生程式也使用類似機制處理圖片）。

下一章節描述處理靜態資產的另一種方法。

加入 SVG

注意：此功能在 react-scripts@2.0.0 及更新版本，以及 react@16.3.0 及更新版本中才可用。

在上面章節中描述了一種加入 SVG 檔案的方法。你也可以直接將 SVG 匯入為 React 元件。你可以使用兩種方法中的任何一種。在你的程式碼中，它會像這樣顯示

import { ReactComponent as Logo } from './logo.svg';

function App() {
  return (
    <div>
      {/* Logo is an actual React component */}
      <Logo />
    </div>
  );
}

如果你不想要將 SVG 當成一個獨立檔案載入，這很方便。不要忘記匯入中大括號！ReactComponent 匯入名稱很重要，它會告訴 Create React App 你想要一個會呈現 SVG 的 React 元件，而不是它的檔名。

提示：匯入的 SVG React 元件接受 title 道具以及 svg 元素接受的其他道具。使用此道具為你的 svg 元件增加一個無障礙標題。

加入 SVG​

加入 SVG