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');
}

我的应用程序是基于RubyonRails构建的。细长的标记如下所示

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

---

在我的本地主机上，这些功能正常工作，但当我们启动站点进行生产时，文件丢失了。我知道rails将所有内容都吸收到一个公共目录中，但我不知道如何解决这个问题，以使映像在本地主机和生产环境中都按照我希望的方式运行。我尝试删除“../assets/”引用并仅指向该文件，但这在本地主机或生产环境中都不起作用。

尝试将您的徽标移动到您的

public

文件夹，并像这样引用它们：

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

$（'#logo'）.attr（'src'，'/blue#u logo.png'）

---

$（'#logo'）.attr（'src'，'/white_logo.png'）

Rails正在使用资产管道，将指纹添加到每个js、css和其他资产文件中。因此，您不能仅按文件名获取文件，您需要使用带有指纹的名称

image_标记

helper将在生产中生成正确的路径，因此您需要做的是以某种方式将这些路径注入javascript

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

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

然后

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

---

/LocalHost上找不到blue_logo.png哦，很抱歉！忘了提到你应该将你的徽标移动到公用文件夹。为了清晰起见，我刚刚更新了我的答案。我喜欢这个答案，问题是浏览器用双引号将其呈现为纯HTML，结果不匹配并引发语法错误。实际上，我是通过用单引号切换双引号来呈现的。不幸的是，现在src被设置为图像标记。除了attrHey@NickGilbert，我需要使用不同的方法，我更新了我的答案。您需要调用

asset\u path

helper，而不是

image\u tag

。它将生成普通url。