资产路径、指纹和缩略图切换器答案

【问题标题】：Asset path, fingerprints and thumbnail switcher资产路径、指纹和缩略图切换器
【发布时间】：2013-08-26 22:30:18
【问题描述】：

我对 RoR 非常缺乏经验，但只是继承了一个要完成的项目。

我们有一个 jQuery 函数附加到一些缩略图的“点击”事件，它可以换出更大的图像。由于资产路径指纹识别功能，这不起作用。 javascript 函数中使用的方法只是通过从缩略图文件名（src 属性）中删除子字符串来获取大图像 URL。由于指纹哈希值从拇指到大文件不同，因此这是行不通的。

解决此类问题的最佳方法是什么？

    $('.thumb').click(function () {
        var thumbUrl = $(this).find('img').attr('src');
        var bigUrl = thumbUrl.replace('_tile', '');

这是 javascript...没有真正的“代码”，只是此控制器/视图的预编译资产在文件名中有指纹哈希，并且大文件指纹与拇指文件指纹不同（自然）等等图片交换功能中的字符串替换不起作用。

【问题讨论】：

【解决方案1】：

我建议您在渲染 HTML 时将大图像 url 作为数据属性添加到 img 标签中，然后您可以在 javascript 函数中将其拉出，例如：

在您的 ERB 模板中：

<%= image_tag(
  "thumb.jpg",
  :data => { "large_image_url" => image_url("large.jpg") }
) %>

然后，在你的 JS 中：

$('.thumb').click(function () {
  var bigURL = $(this).data("large_image_url");
  ...
});

【讨论】：

是的，谢谢，这是完美的。 image_url() 函数正是我想要的。
除了我在本地机器上编译然后使用 wget 生成所有这些静态 HTML 文件。那些获得 FTPd 到服务器。 image_url() 将 localhost:3000 放在图像 URL 中，因此它仅适用于我的机器。你如何让它使用根相对 URL 来获取资源？

【解决方案2】：

您可以将各种预期的 URL 存储在 thumb div 或任何最相关的数据属性中。像这样：

<div class='thumb' 
     data-large-size='http://server/path/large.jpg'
     data-small-size='http://server/path/small.jpg'>
   ...
</div>

然后在 jQuery 中抓取它们：

$('.thumb').click(function () {
    var url = $(this).data('large-size');
    $(this).find('img').attr('src', url);
}

无需计算任何东西。 url 可以由asset URL helpers 提供。

【讨论】：