如何在Rails / Webpacker / React应用中处理图像？

小编典典

如何在Rails / Webpacker / React应用中处理图像？

reactjs

我正在使用带有Rails 5.1.4的webpacker来玩Reactjs，Redux和react-router-dom。

我有一个需要显示图像的导航栏组件，但无法访问assets/images文件夹中的图像，也不能访问文件夹中的图像public。

我在这： app/javascript/src/components/navbar

我的路线在中定义main.jsx：

    <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应用程序中的图像的方法？

谢谢

阅读 319

2020-07-22

共1个答案

小编典典

只需编辑文件config/webpacker.yml并替换以下行：

resolved_paths: []

与此：

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

2020-07-22