我正在使用rails 5.1.4的webpacker玩Reactjs,Redux和react-router-dom。如何處理Rails/Webpacker/React應用程序中的圖像?
我有一個導航欄組件需要顯示圖像,但我無法訪問assets/images
文件夾中的圖像,也無法訪問public
文件夾中的圖像。
我在這裏:在main.jsx
定義 app/javascript/src/components/navbar
我的路線:
<BrowserRouter>
<div>
<Alert error={error} />
<Navbar user={user}/>
<Switch>
<Route path="/post/:id" component={PostsShow} />
<Route path="/" component={PostsIndex} />
</Switch>
</div>
</BrowserRouter>
這裏是我試過:
<img src="logo.png" alt="Logo" />
<img src="assets/logo.png" alt="Logo" />
<img src="assets/images/logo.png" alt="Logo" />
的3次嘗試是全成一次,但那麼它會給我一個404 (Not Found)
,因爲當路徑改變時,它會使我的圖像路徑也發生改變。因此,從根路徑我有我的圖像,因爲/assets/images/logo.png
確實存在,但是當我在/post/:id
,重新加載頁面或剛剛登陸這裏給了我以下404
:
logo.png:1 GET http://localhost:3000/posts/assets/images/logo.png 404 (Not Found)
你能幫助我嗎?還有更多關於如何處理這種圖像或混合reactjs/rails應用程序的圖像?
感謝
非常感謝,你讓我天。這比你分享的文章中所說的更簡單。我所要做的就是用'yarn install file-loader'安裝file-loader,然後從'../../../ assets/images/logo.png';''和'user' '。那很棒。 – adesurirey