React.js中的正確圖片路徑
P粉024986150
2023-08-21 14:24:49
<p>我在我的React專案中遇到了一些關於圖片的問題。事實上,我一直以為src屬性中的相對路徑是基於檔案的架構來建構的。 </p>
<p>這是我的檔案架構:</p>
<pre class="brush:php;toolbar:false;">components
file1.jsx
file2.jsx
file3.jsx
container
img
js
...</pre>
<p>然而,我意識到路徑是基於URL來建構的。在我的一個元件中(例如file1.jsx),我有以下程式碼:</p>
<pre class="brush:php;toolbar:false;">localhost/details/2
<img src="../img/myImage.png" /> -> 正常運作
localhost/details/2/id
<img src="../img/myImage.png" /> -> 不工作,圖片無法顯示</pre>
<p>如何解決這個問題?我希望在由react-router處理的任何路由形式中,所有圖片都能以相同的路徑顯示。 </p>
在
create-react-app
中,似乎無法使用相對路徑來引用圖片。相反,你可以使用import來引入圖片:您正在使用相對URL,它是相對於目前URL而不是檔案系統的。您可以透過使用絕對URL來解決此問題
<img src ="http://localhost:3000/details/img/myImage.png" />
但是,當您部署到www.my-domain.bike或任何其他網站時,這並不理想。更好的方法是使用相對於網站根目錄的URL
<img src="/details/img/myImage.png" />