资产路径，指纹和缩略图切换器

Question

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

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

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

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

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

Answer 1

您可以隐藏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);
}

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

Answer 2

我建议您在渲染HTML时将大图像网址添加到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");
  ...
});