Question

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

Answer 1

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

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

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

然后

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

Answer 2

尝试将您的徽标移至public文件夹，并按照以下方式引用它们：

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

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

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

2 个答案: