预编译 application.js 资产答案

【问题标题】：Precompiling application.js assets预编译 application.js 资产
【发布时间】：2014-03-08 02:16:04
【问题描述】：

如何在我的 application.js 中使用此代码，以便我可以预编译此处使用的图像？我应该使用什么 rails helper？

    $(document).ready(function(){
    $(".imgthumb").click(function(){
        $(".thumbnailcurrent").addClass("thumbnails");
        $(".thumbnails").removeClass("thumbnailcurrent");
        $(this).addClass("thumbnailcurrent");
        $(this).removeClass("thumbnails");

        var img=($(this).attr("data-id"));

        if (img==1) {

         $('.imgbig').html("<%= asset_path src: 'flappy1.jpg', height: '275', width: '391' %>");
        } else if (img==2) {

         $('.imgbig').html("<%= asset_path src: 'flappy2.jpg', height: '275', width: '391' %>");
        } else if (img==3) {

         $('.imgbig').html("<%= asset_path src: 'flappy3.jpg', height: '275', width: '391' %>");
        }


});

    });

【问题讨论】：

当您说“预编译图像”时，您的意思是要从 JS 中预加载它们吗？
我希望上面的代码最终能正常工作。它存储在 applications.js.erb 文件中。你觉得它合适吗？不确定我是否正确设置了asset_path 和 src: 实现。第二双眼睛会很棒，非常感谢。
也许 $('.imgbig').html("");
嘿，我想我明白你的问题了。也许，这就是你需要的？ github.com/kavkaz/js_assets
是的，基本上图像显示在开发中，而不是在生产中。那个 gem 能解决问题吗？谢谢！

标签： javascript jquery ruby-on-rails ruby-on-rails-3 ruby-on-rails-4

【解决方案1】：

位于 public/assets 路径中的预编译图像？为什么不直接使用这个路径呢？

【讨论】：

非常感谢 Vitaly，这很公平，但上面的代码看起来功能正常吗？我有一个画廊，使用上面的代码，图像仍然没有切换，想确保它看起来正确。

【解决方案2】：

您无法通过 url 访问您的资产：

'/assets/images/flappy1.png'

因为在生产环境中你有类似的东西：

'/assets/images/flappy1-b3bb250d5300736006c894.png'

它们之间的合规表位于自动生成的清单文件中。

但是，直接使用清单文件是个坏主意，因为其中包含许多无关数据。

通常你有两种选择：

用 Erb 预处理器包装你的 javascript，以访问

<%= asset_path(path/to/asset.jpg) %> 助手。
或更多美容解决方案：gem 'js_assets'，可以解决您的问题。

gem 安装后，需要包含 JavaScript-helper：

// app/assets/javascripts/application.js

//= require app_assets

合规表将存储在 window.project_assets 变量中。

asset_path javascript 的辅助方法接收到您的资产的逻辑路径，并返回给定环境的相对路径：

var path = asset_path('images/flappy1.jpg')
// the function will return for development:
// /images/flappy1.jpg
// and for production
// /assets/images/flappy1-b3bb250d5300736006c894.jpg

希望，这会有所帮助！

【讨论】：