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

Posted 2023-02-22

技术标签:

【中文标题】如何在 Rails / Webpacker / React 应用程序中处理图像？【英文标题】：How to handle images in a Rails / Webpacker / React app? 【发布时间】：2018-04-01 08:29:13 【问题描述】：

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

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

这是我尝试过的：

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

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

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

你能帮帮我吗？还有更多关于在那种或混合 React/Rails 应用程序中处理图像的方法是什么？

谢谢

【问题讨论】：

【参考方案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

【讨论】：

我的情况一模一样，上面的方法我也试过了，但是还是继续出现图片无法解析的错误。我能够在不将app/assets 添加到resolved_paths 的情况下实施此解决方案第 11 行是什么？你能更新这个以显示整个文件吗？这在 Rails 6 中对我有用......与下面的响应不同，我需要将“app/assets”添加到 resolve_paths。我想如果我想为此使用资产文件夹，我也必须为 CSS 执行此操作。如果你使用这个方法并且在你的视图中从 image_tag 中调用图片，那么你的图片会被加载两次【参考方案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 />
  </React.Fragemnt>
  )

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

【讨论】：

【参考方案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的回答

【讨论】：

【参考方案4】：

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

【讨论】：

非常感谢，你让我很开心。这比你分享的文章中说的还要简单。我所要做的就是使用yarn install file-loader 安装文件加载器，然后需要我的图像import Logo from '../../../assets/images/logo.png'; 并使用它<img src=Logo alt="Logo" />。太好了。 install 已替换为 add 以添加新的依赖项。改为运行“yarn add file-loader”。【参考方案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>
);

希望这会有所帮助。

【讨论】：

虽然这可行，但在 js 中添加到 window 对象是不好的做法。它使单元测试更加困难，允许页面上的任何脚本更改您的图像，这可能会打开 xss 矢量，并且您必须为您想要的每个图像遵循该过程。