React img src
-
在 React 中使用
create-react-app
包引用本 Map 像 -
在 React 中使用
import
語句載入影象 -
使用 React 中的
require()
方法載入影象 -
在 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 會在內部記錄元件與影象之間的關聯。之後,它將獲取資產,複製它,給它一個唯一的名稱並將它放在伺服器上的可訪問目錄中。
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