React.js 中影像路徑的正確方法

確定 React.js 專案中影像的正確路徑一直是常見的挑戰。傳統上，基於專案的檔案結構，在 src 屬性中使用相對路徑。然而，在使用 create-react-app 建立的 React.js 專案中，這種方法可能並不總是有效。

這從提供的示例中可以明顯看出，當路由為“/details/2”時，圖像可以正確顯示”，但當它是“/details/2/id”時則不然。出現這種不一致的原因是相對路徑是根據URL 結構而不是檔案架構來解釋的。導入影像，而不是在src 屬性中使用相對路徑。 導航類別擴充組件 { 使成為（） { 返回 (); } }

在此方法中，導入語句指定映像檔的相對路徑，然後將映像儲存為變數。渲染組件時，此變數用作圖像的來源。

import logo from './logo.png';

class Nav extends Component {
  render() {
    return ();
  }
}