React.js中的正確圖片路徑
P粉024986150
P粉024986150 2023-08-21 14:24:49
0
2
606
<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>
P粉024986150
P粉024986150

全部回覆(2)
P粉509383150

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

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

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

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

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

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

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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板