React.js 中如何確保跨路由的影像顯示一致？

理解根源路徑行為

在React.js 專案中，使用src 屬性的影像路徑不是基於檔案結構，而是基於URL的根源。這意味著，如果您的應用程式在 localhost/details/2 上提供服務，只要路徑在該路由內保持不變，相對路徑引用的映像就會正確載入。但是，如果路由更改為 localhost/details/2/id，則由於根原點發生更改，圖像可能無法顯示。

解決影像路徑對路由的依賴

為了確保跨路徑的影像顯示一致，請考慮使用絕對路徑。以下是使用絕對路徑匯入和引用影像的方法：

import myImage from '/img/myImage.png'; // Absolute path to image

function File1() {
  return <img src="%7BmyImage%7D" alt="My Image">;
}

透過將影像作為模組匯入，您可以建立絕對參考點，無論路徑如何變化，該參考點都保持一致。這種方法可確保始終從正確的位置檢索影像。

替代方法

如果您喜歡使用相對路徑，可以採用以下替代方法：

• 使用公用資料夾：將映像移至公用目錄，該目錄會自動由create-react-app 公開，並可從具有相對路徑的任何路由存取。
• 設定 Webpack： 修改 Webpack 設定可讓您自訂相對路徑的解析方式。然而，這是一個更複雜的解決方案。

以上是React.js 中如何確保跨路由的影像顯示一致？的詳細內容。更多資訊請關注PHP中文網其他相關文章！