如何在 React.js 中使用 React Router 解決影像路徑問題？

React.js 中的Img 路徑解析

在React.js 中， 的src 屬性是元素應包含圖像的URL。然而，在某些情況下，相對路徑似乎沒有被正確解析，特別是在 React Router 的上下文中。

考慮以下檔案結構：

components
    file1.jsx
    file2.jsx
    file3.jsx
container
img
js 
... 

在file1.jsx 中，以下程式碼用於顯示影像：

localhost/details/2
<img src="../img/myImage.png" /> <!-- works -->

localhost/details/2/id
<img src="../img/myImage.png" /> <!-- doesn't work -->

如您所觀察到的，相對路徑在第一種情況下有效，但在第二種情況下無效。這是因為相對路徑是根據 URL 解析的，而不是檔案架構。

為了確保無論路徑如何，圖像都能正確顯示，一種解決方案是使用以下語法導入圖像：

import logo from './logo.png' // relative path to image 

class Nav extends Component { 
    render() { 
        return ( 
            <img src={logo} alt={&quot;logo&quot;}/> 
        )  
    }
}

通過導入圖像，您可以確保它是捆綁資源，並且無論當前路由如何，都可以在所有組件中使用。

以上是如何在 React.js 中使用 React Router 解決影像路徑問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！