使用 React 內聯樣式設定背景影象

1. 在 React 中使用內聯樣式設定背景影象
2. 在 React 中使用內聯樣式將本 Map 像設定為背景

在構建複雜的 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")

載入影象併為它們指定一個變數名稱更具可讀性，並讓你可以在必要時自由地進行更改。