如何在 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

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

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 3

2021 年更新（rails 6.1.4），resolved_paths 键已更改为 additional_paths。

所以，改变：

# config/webpacker.yml

default: &default
  additional_paths: []

进入：

# config/webpacker.yml

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

其余的跟随Daniel's的回答

Answer 4

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

Answer 5

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

将您的 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>
);

希望这会有所帮助。