Ruby on Rails，使用JavaScript更改图像源

我有一个JavaScript函数，当用户向下滚动时，它会更改我的网页上的一个图像

$(window).scroll(function() { if ($(document).scrollTop() > 0) { switchToStatic(); } else { switchToAnimated(); } } function switchToAnimated() { if ($(window).width() > 768) { $('body').css('padding-top', '0'); $('#logo').attr('src', '../assets/blue_logo.png') $('#logo').css('width', '15vw'); $('.navbar').css("background-color", 'transparent'); } } function switchToStatic() { $('body').css('padding-top', '50px'); $('#logo').attr('src', '../assets/white_logo.png') $('#logo').css('width', '7.5vw'); $('.navbar').css("background-color", '#3B98F2'); } 

我的应用程序基于Ruby on Rails构建。 纤薄的标记看起来像这样

 a href="http://www.thisisarealsite.com" = image_tag("white_logo.png", alt: "logo", id: "logo") 

在我的localhost上，这些function正常工作，但是当我们将网站启动到生产时，文件丢失了。 我知道rails将所有内容都放到了一个公共目录中，但我不知道如何解决这个问题，以使图像在localhost和production上都能按照我想要的方式运行。 我试图删除’../assets/’引用，只是指向该文件，但这不适用于localhost或生产。

Answer 1

Rails使用资产管道，为每个js，css和其他资产文件添加指纹。 因此，您不能只按名称获取文件，您需要使用带指纹的名称。 image_tag helper将在生产中生成正确的路径，因此您需要做的是以某种方式将这些路径注入到javascript中。

例如，您可以执行以下操作：

 javascript: var blueLogoPath = "#{asset_path('blue_logo.png')}"; var whiteLogoPath = "#{asset_path('white_logo.png')}"; 

然后

 $('#logo').attr('src', whiteLogoPath); 

Answer 2

尝试将徽标移动到公用文件夹并引用它们，如下所示：

$('#logo').attr('src', '/blue_logo.png')

$('#logo').attr('src', '/white_logo.png')