Rails 6/Webpack 无法在生产中编译从 js.erb 引用的图像？（但正在开发中）

Question

在开发过程中，我在 Rails 6 中使用 Webpack 的这段代码没有问题（在运行 bundle exec rails webpacker:install:erb 之后）：

# app/javascript/raty.js.erb

<% helpers = ActionController::Base.helpers %>

$(document).on("turbolinks:load", () => {
  $('.star-rating').raty({
    starOn: "<%= helpers.asset_pack_path('media/images/star-on.png') %>",
    starOff: "<%= helpers.asset_pack_path('media/images/star-off.png') %>",
    readOnly: true,
    score: function () {
    return $(this).attr('data-score');
    }
  });
});

请记住，我也在使用 Webpack 来加载静态资产，所以没有任何链轮（尽管我没有删除它的 gem 或触及与资产管道相关的任何配置；只是暂时忽略它). 这意味着我将所有图像存储在 app/javascript/images 中，然后根据文档要求：

# app/javascript/packs/application.js

// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
const images = require.context('../images', true)
const imagePath = (name) => images(name, true)

但是，在生产中， 我的推送被 Heroku 拒绝了，因为引用的 .png（star-on.png 和 star-off.png）不能'找不到，因为（我认为）Webpack 将它们编译到 /public 目录中，因此它们不再出现在 /media/images 路径中。不幸的是，Heroku 上的指南没有涵盖 Rails 6/Webpack，我遇到的所有答案都是针对 Sprockets，而不是 Webpack。

如有任何建议，我们将不胜感激！

Answer 1

在 Webpack 领域，您也 "import" 图片。给定以下目录结构：

app/
  javascript/
    images/
      star-on.png
      star-off.png
    packs/
      application.js
    raty.js

这就是您在 raty.js 中要做的：

import $ from 'jquery'
import 'raty-js'

import starOn from "./images/star-on.png"
import starOff from "./images/star-off.png"

$(document).on("turbolinks:load", () => {
  $('.star-rating').raty({
    readOnly: true,
    starOn: starOn,
    starOff: starOff,
    score() {
      return $(this).attr('data-score');
    }
  });
});

注意这里不需要使用ERB；如果您有正确的导入路径，默认的 Webpacker 配置将知道如何解析图像的输出路径。

此外，您只需具备以下条件：

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

如果您想通过 HTML 模板中的 image_pack_tag 参考图像。您可能非常想这样做，但是，如果只是为了这个小例子，则没有必要。

Rails 6/Webpack 无法在生产中编译从 js.erb 引用的图像？（但正在开发中）

Rails 6/Webpack unable to compile images referenced from js.erb in production? (but working in development)

javascript

ruby-on-rails

webpack

dev-to-production

Rails 6/Webpack 无法在生产中编译从 js.erb 引用的图像？ （但正在开发中）

Rails 6/Webpack unable to compile images referenced from js.erb in production? (but working in development)

javascript

ruby-on-rails

webpack

dev-to-production

Rails 6/Webpack 无法在生产中编译从 js.erb 引用的图像？（但正在开发中）