如何處理Rails/Webpacker/React應用程序中的圖像？

Question

我正在使用rails 5.1.4的webpacker玩Reactjs，Redux和react-router-dom。

我有一個導航欄組件需要顯示圖像，但我無法訪問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應用程序的圖像？

感謝

Answer 1

與這只是編輯文件config/webpacker.yml並替換線11：

resolved_paths: ['app/assets'] 

然後，把圖像中app/assets/images文件夾，並加載它是這樣的：

import React from 'react' 
import MyImage from 'images/my_image.svg' 

const MyComponent = props => <img src={MyImage} /> 

export default MyComponent 

Answer 2

也許這會有所幫助： https://engineering.klarna.com/migrating-from-rails-asset-pipeline-to-node-s-webpack-684230e3a93a 看一看形象的一部分。