Question

如何在我的application.js中获取此代码，以便我可以预编译此处使用的图像？我应该使用哪些铁路助手？

    $(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' %>");
        }


});

    });

Answer 1

位于公共/资源路径中的预编译图像？为什么不直接使用这条路径？

Answer 2

您无法通过网址访问您的资源：

'/assets/images/flappy1.png'

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

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

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

然而，直接使用manifest-file是个坏主意，因为它包含许多无关的数据。

通常，您有两种选择：

使用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

希望，这有帮助！

预编译application.js资产

2 个答案: