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

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.Fragment>     
    )
  }
}

WebPacker在内部将这些映像路径转换为包。

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

所以，改变：

# config/webpacker.yml

default: &default
  resolved_paths: []

进入：

# config/webpacker.yml

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

剩下的是丹尼尔的答案

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

对于那些可能仍然有这个问题的人，给予这个：
把你的img放在app/assets/images中。在这个例子中，我的形象被称为“标志。png '.
在你的申请中。html.erb文件，把这个放在头部：

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

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

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

希望这能帮上忙。