如何在 React 中正確引用靜態圖像進行背景圖像樣式？

在React中存取BackgroundImage的靜態影像

開發人員在React應用程式中存取內聯backgroundImage樣式的靜態影像時可能會遇到挑戰。以下常見語法方法嘗試引用導入的圖像：

<code class="javascript">import Background from '../images/background_image.png';

const sectionStyle = {
  width: "100%",
  height: "400px",
  backgroundImage: "url(" + { Background } + ")"
};</code>

雖然此方法對於 可以完美運行，但標籤，當應用於背景圖像樣式時它會失敗。關鍵的差異在於 backgroundImage 屬性中花括號的錯誤使用。

要解決此問題，正確的語法應省略花括號並確保背景是經過預處理的字串（可能由第三方促進） webpack 和圖像檔案載入器等第三方工具）。

<code class="javascript">backgroundImage: "url(" + Background + ")"</code>

或者，開發人員可以利用ES6 字串範本來實現相同的結果：

<code class="javascript">backgroundImage: `url(${Background})`</code>

透過實作這些修改，開發人員可以成功在React 應用程式中引用靜態圖像作為背景圖像樣式。

以上是如何在 React 中正確引用靜態圖像進行背景圖像樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！