React.js中的正確圖片路徑

Question

我在我的React專案中遇到了一些關於圖片的問題。事實上，我一直以為src屬性中的相對路徑是基於檔案的架構來建構的。

這是我的檔案架構：

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

然而，我意識到路徑是基於URL來建構的。在我的一個元件中（例如file1.jsx），我有以下程式碼：

localhost/details/2
<img src="../img/myImage.png" /> -> 正常運作

localhost/details/2/id
<img src="../img/myImage.png" /> -> 不工作，圖片無法顯示

如何解決這個問題？我希望在由react-router處理的任何路由形式中，所有圖片都能以相同的路徑顯示。

Answer 1

在create-react-app中，似乎無法使用相對路徑來引用圖片。相反，你可以使用import來引入圖片：

import logo from './logo.png' // 图片的相对路径

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

Answer 2

您正在使用相對URL，它是相對於目前URL而不是檔案系統的。您可以透過使用絕對URL來解決此問題

<img src ="http://localhost:3000/details/img/myImage.png" />

但是，當您部署到www.my-domain.bike或任何其他網站時，這並不理想。更好的方法是使用相對於網站根目錄的URL

<img src="/details/img/myImage.png" />