Rails 6/Webpack在生产环境中无法编译js.erb引用的图片，但在开发环境中可以正常工作？

Question

Rails 6/Webpack在生产环境中无法编译js.erb引用的图片，但在开发环境中可以正常工作？

javascriptruby-on-railswebpackdev-to-production

3

在开发过程中，我使用Webpack在Rails 6中编写以下代码时没有问题（在运行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加载静态资源，因此不用sprockets（虽然我没有删除它的gems或触及与资产管道相关的任何配置；只是暂时忽略它）。这意味着我将所有图像存储在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的。

如有建议，不胜感激！

- Dijkie85

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- rossta · Accepted Answer

在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 来引用图片资源。你很有可能想这样做，但是，对于这个小例子来说，这是不必要的。