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

【问题标题】：Ruby on Rails, change source of image with JavaScriptRuby on Rails，使用 JavaScript 更改图像来源
【发布时间】：2016-11-08 21:19:09
【问题描述】：

我有一个 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")

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

【问题讨论】：

标签： javascript ruby-on-rails ruby image file

【解决方案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);

【讨论】：

我喜欢这个答案，问题是浏览器将其呈现为带有双引号的纯 HTML，最终导致不匹配并引发语法错误。
实际上，我通过用单引号切换双引号来渲染它。不幸的是，现在 src 被设置为一个图像标签。我需要使用除 attr 之外的其他方法
嘿@NickGilbert 我更新了我的答案。你需要调用asset_path helper 而不是image_tag。它将生成纯 url。

【解决方案2】：

尝试将您的徽标移动到您的 public 文件夹并像这样引用它们：

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

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

【讨论】：

/blue_logo.png 在 localhost 上找不到
哦，对不起！忘了提及您应该将您的徽标移动到公共文件夹。为了清楚起见，我刚刚更新了我的答案。