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

我正在使用rails 5.1.4中的Webpacker来处理React、Redux和React路由器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" />

你能帮我吗？还有更多关于你如何处理此类或混合React/Rails应用程序中的图像的问题

谢谢

也许这有帮助：

---

查看图像部分。

只需编辑文件

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

从“React”导入React
从“images/my_image.svg”导入MyImage
常量MyComponent=props=>
导出默认MyComponent

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

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

从“React”导入React；
从“${imagePath}/example1.png”导入MyImage
导出类MyComponent扩展了React.Component{
render（）{
返回(
)
}
}

---

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

对于可能仍存在此问题的用户，请尝试：

将你的img放在app/assets/images中。在本例中，我的图像称为“logo.png”

在application.html.erb文件中，将以下内容放在头部：

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

window.logo=“”

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

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

返回(
);

---

希望这有帮助。

非常感谢，你让我开心。这比你在分享的文章中说的还要简单。我所要做的就是用

安装文件加载器
安装文件加载器，然后要求我的图像
从“../../../../assets/images/Logo.png”导入徽标并使用它
。太好了。
install
已替换为
add
以添加新的依赖项。改为运行“纱线添加文件加载器”。我有完全相同的场景，并尝试了上述操作，但我仍然得到无法解析图像的错误。我能够实现此解决方案，而无需将
app/assets
添加到
resolved\u路径
第11行是什么？你能更新这个来显示整个文件吗？这对我来说在Rails 6上很有效。。。与下面的回答不同，我需要添加“应用程序/资产”来解析路径。我想如果我想使用assets folder来实现CSS，我也必须这样做。如果你使用这种方法并在视图中调用image_标记中的图像，那么你的图像将被加载两次，而这样做的话，在js中添加到window对象是不好的做法。它使单元测试变得更加困难，允许页面上的任何脚本更改图像，从而打开xss向量，并且您必须为所需的每个图像执行该过程。
<script type="text/javascript">
   window.logo = "<%= image_url('logo.png') %>"
</script>

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