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

Question

我正在使用带有 rails 5.1.4 的 Webpacker 来玩 React、Redux 和 react-router-dom.

我在 app/javascript/src/components/ 中有一个 Navbar.jsx 组件需要显示图像，但我无法访问存储在 app/assets/images/ 中的图像。

这是我试过的方法：

<img src="logo.png" alt="Logo" />
<img src="assets/logo.png" alt="Logo" />
<img src="assets/images/logo.png" alt="Logo" />

最后一次尝试从根路径成功，因为 /assets/images/logo.png 确实存在，但是当我导航到 /posts/:id 时，它给了我以下错误：

logo.png:1 GET http://localhost:3000/posts/assets/images/logo.png 404 (Not Found)

你能帮帮我吗？以及您在那种或混合 React/Rails 应用程序中处理图像的方式是什么？

谢谢

Answer 1

也许这有助于： https://engineering.klarna.com/migrating-from-rails-asset-pipeline-to-node-s-webpack-684230e3a93a 看看图片部分。

Answer 2

只需编辑文件 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

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

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

将您的 img 放入 app/assets/images。在这个例子中，我的图像被称为 '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 5

2021更新（rails6.1.4），resolved_paths键变成了additional_paths.

所以，改变：

# config/webpacker.yml

default: &default
  resolved_paths: []

进入：

# config/webpacker.yml

default: &default
  additional_paths: ['app/assets']

以及回答后的其他人

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

How to handle images in a Rails / Webpacker / React app?

ruby-on-rails

reactjs

webpack

webpacker