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={"logo"}/>
)
}
}通過導入圖像，您可以確保它是捆綁資源，並且無論當前路由如何，都可以在所有組件中使用。
以上是如何在 React.js 中使用 React Router 解決影像路徑問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
