如何处理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 看一看形象的一部分。