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']

然后，将图像放在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

对于那些仍然可能遇到此问题的人，请尝试一下：

将您的img放入应用程序/资产/图像中。在此示例中，我的图片称为“ logo.png”。

在您的application.html.erb文件中，将其放在头部：

<script type="text/javascript">
   window.logo = "<%= image_url('logo.png') %>"
</script>

现在在您的组件中，渲染图像：

return (
  <div>
    <a href="/">
      <img src={window.logo}/>
    </a>
  </div>
);

希望这会有所帮助。

Answer 3

If we leave resolved_path as [] in webpacker.yml also it works.

Example = 

# Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .tiff
    - .ico
    - .svg
    - .eot
    - .otf
    - .ttf
    - .woff
    - .woff2

您甚至可以在组件中创建图像文件夹。将其加载到组件文件中，如下所示-

import React from 'react;
import MyImage from '${imagePath}/example1.png'

export class MyComponent extends React.Component {
  render() {
  return (
  <React.Fragment>
   <img src={MyImage} alt="Image text"/>
  </React.Fragemnt>
  )
 }
}

Webpacker将这些图像路径转换为包。

Answer 4

也许这会有所帮助： https://engineering.klarna.com/migrating-from-rails-asset-pipeline-to-node-s-webpack-684230e3a93a 看一下Images部分。

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

4 个答案: