使用 React 內聯樣式設定背景影象
在構建複雜的 Web 應用程式時,開發人員通常需要設定自定義背景影象。標準方法是使用 CSS 和 HTML。
在開發 React 應用程式時,你有許多設定背景影象的選項。你可以使用常規 CSS 檔案或使用 CSS-in-JS
解決方案,例如 React 中的內聯樣式。
在 React 中使用內聯樣式設定背景影象
內聯樣式允許你在 JavaScript 檔案中配置 HTML 或 React 元件的樣式。這是在 React 類元件中設定背景影象的示例:
class App extends Component {
render() {
const containerStyle = {
backgroundImage:
"url(https://cdn.pixabay.com/photo/2021/09/02/16/48/cat-6593947_960_720.jpg)",
width: "600px",
height: "600px",
};
return <div style={containerStyle}><h1 style={{color: "black"}}>Hi! Try edit me</h1></div>;
}
}
HTML 與 JSX
像 HTML 一樣,在 JSX 中,我們使用容器的 style
屬性來定義內聯樣式。但是,與 HTML 不同的是,我們不能將其值設定為簡單的文字。相反,我們使用大括號來傳遞 JavaScript 變數 containerStyle
。這個變數本質上是一個物件,它包含 CSS 屬性的鍵值對及其對應的值。
一個重要的區別是 style
物件的鍵不能包含空格或其他非字母數字符號。在常規 CSS 中,該屬性將被定義為 background-image
,但在 JavaScript 中它變成了 style
物件的 backgroundImage
屬性。
使用 CSS-in-JS
解決方案的另一個優勢是你的樣式定義可以包含變數引用。這是通過使用模板文字來實現的。下面是一個例子:
class App extends Component {
render() {
const backgroundImageURL =
"https://cdn.pixabay.com/photo/2021/09/02/16/48/cat-6593947_960_720.jpg";
const containerStyle = {
backgroundImage:
`url(${backgroundImageURL})`,
width: "600px",
height: "600px",
};
return <div style={containerStyle}><h1 style={{color: "black"}}>Hi! Try edit me</h1></div>;
}
}
在這種情況下,樣式將反映對變數的更改。
在 React 中使用內聯樣式將本 Map 像設定為背景
如果你想使用本地 assets
資料夾中的影象,你可以使用 import
語句或 require()
方法來載入它。但是,只有在你的開發環境包含 webpack 時,載入影象才有效。
無論你選擇以哪種方式將影象載入到應用程式中,你都必須指定相對路徑:
import image from "./assets/filename.jpg"
此相對路徑假定元件和資產資料夾都位於 src
資料夾中。
匯入影象後,你可以通過匯入的名稱(在本例中為 image
)來引用它,就像引用變數一樣。你在應用中使用的每張圖片都必須單獨匯入,但你的背景圖片只需匯入一次。
你還可以建立一個單獨的變數並使用它來儲存使用 require()
方法載入的影象值:
const image = require("./assets/filename.jpg")
載入影象併為它們指定一個變數名稱更具可讀性,並讓你可以在必要時自由地進行更改。
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