如何处理Rails/Webpacker/React应用程序中的图像？

Question

我正在使用带有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应用程序中图像的方式？

谢谢

Answer 1

只需编辑文件config/webpacker.yml并用以下代码替换第11行:

resolved_paths: []

然后,将图像放在app/assets/images文件夹中并像这样加载:

resolved_paths: ['app/assets']