使用React 內聯樣式設定背景圖像：了解內聯圖像和內聯背景圖像之間的差異

使用React 時，設定使用內聯樣式的Hintergrundsbild 看起來可能很簡單，但使用內聯 標籤和使用backgroundImage設定背景圖像之間存在一些關鍵區別property.

了解內聯圖像

使用內聯 標記是顯示圖像的簡單直接的方法。透過將 src 屬性設定為圖片的路徑，可以直接載入並顯示圖片。

設定具有內聯樣式的背景圖像

使用內聯樣式設定背景圖像涉及使用backgroundImage 屬性並提供圖像URL 作為值。這裡的主要差異是，backgroundImage 屬性需要一個包含 URL 的字串，而不是 JavaScript 變數或表達式。

正確文法：

const sectionStyle = {
  backgroundImage: `url(${Background})`,
};

在此範例中，由於 webpack 及其映像檔載入器等工具，Background 變數已經是一個包含映像路徑的字串。

不正確的語法：

const sectionStyle = {
  backgroundImage: "url("   { Background }   ")", // Incorrect
};

不正確的語法在 { Background } 周圍使用大括號，這是不必要的，並且可能會導致錯誤。

使用 ES6 字串範本

使用字串連接的另一種方法是使用 ES6 字串範本。這允許更清晰、更簡潔的語法：

const sectionStyle = {
  backgroundImage: `url(${Background})`,
};

透過了解這些差異，您可以在React中使用內聯樣式有效地設定背景圖片，確保您的應用程式正確顯示圖像。