在 rails 5.1.7 中删除资产管道后，Webpack 找不到图像路径

Question

我正在使用 rails 5.1.7。并尝试从资产管道迁移到 webpacker，我已经运行 rake assets:precompile

我收到这条消息：

Webpacker can't find logo.png in /***/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
  "application.js": "/packs/js/application-a5be4c0a9f54fffa5cb7.js",
  "application.js.map": "/packs/js/application-a5be4c0a9f54fffa5cb7.js.map",
  "entrypoints": {
    "application": {
      "js": [
        "/packs/js/application-a5be4c0a9f54fffa5cb7.js"
      ],
      "js.map": [
        "/packs/js/application-a5be4c0a9f54fffa5cb7.js.map"
      ]
    }
  }
}

那是在 app/javascript/images 中设置我的图像之后，我在其中验证了 logo.png 在那里。

提示此问题的行是：

   <%= link_to asset_pack_path('logo.png', alt: 'logo', width: 150), locale_root_path, class: 'logo'%>

如果我只是简单地删除该行，它将引导我进入也在该文件夹中的另一个不同图像的路径 (app/javascript/image)。

我有这个提取物来配置我的 app/javascript/packs/application.js 文件中的图像路径是：


const images = require.context('../images', true)
const imagePath = (name) => images(name, true)

Answer 1

首先你需要告诉 webpack 你想使用这个图像文件，所以（例如）在你的 app/javascript/packs/application.js 文件中放：

require.context('../images', true)

然后确认图像确实被编译到清单中。然后将此图像放入 link，尝试（我不完全确定 webpacker 可以处理这个）image_pack_tag('media/images/logo.png')

试一试，让我们知道会发生什么。

Answer 2

需要配置Webpack来编译你的图片：

在您的 app/javascript 目录中，创建一个图像文件夹，并将 logo.png 放入其中。

image_tag 已更改为 image_pack_tag 现在您的图像正在使用 webpack 编译。但是，默认情况下，您每次都必须传入整个图像路径，以 media/ 开头，然后是您的 webpack 源路径中的路径，该路径在您的 webpacker.yml 配置文件中定义。例如：

<%= image_pack_tag 'media/images/logo.png', alt: 'logo', width: 150%>

要解决此问题，您可以使用 require.context:

在您的网页入口点中，默认情况下它位于 app/javascript/packs/application.js，您应该添加以下行：

const images = require.context("../images", true);

要访问您视图中的徽标图像，您现在可以使用：

<%= image_pack_tag 'logo.png', alt: 'logo', width: 150%>

在 rails 5.1.7 中删除资产管道后，Webpack 找不到图像路径

Webpack not finding image paths after removing the asset pipeline in rails 5.1.7

ruby-on-rails

webpack

ruby-on-rails-5

webpacker