在 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 目录中，创建一个图像文件夹，并将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%>

Answer 2

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

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

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

试一试，告诉我们会发生什么。