How to reference images in javascript within Rails 4 on Heroku

Question

I am trying to link am image by javascript. When clicking a thumbnail a larger image changes to the corresponding image.

(I have removed some of the classes that are not important for this issue.)

Thumbnails:

    <%= image_tag "uppdrag/thumbs/katja01.png", :class => "ids", :id => "katja01.png" %>
    <%= image_tag "uppdrag/thumbs/katja02.png", :class => "ids", :id => "katja02.png" %>
    <%= image_tag "uppdrag/thumbs/katja03.png", :class => "ids", :id => "katja03.png" %>

Image that changes:

    <%= image_tag "uppdrag/katja01.png", :class => "", :id => "idstudio" %>

Javascript:

$(".ids").click(function() {
  var id = $(this).attr('id');
    $('#idstudio').fadeOut(300, function(){
  $('#idstudio').attr('src','/assets/uppdrag/' + id).bind('onreadystatechange load', function(){
     if (this.complete) $('#idstudio').fadeIn(300);
  });
});
});

It all works fine on localhost:3000, but when precompiled and uploaded to heroku and the name of the pictures change, the name on the id on the thumbnails isn't correct any longer and I haven't been able to figure out how to get the correct name for the picture on the id.

Cheers Carl

Answer 1

You should be able to use the asset_path helper.

http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets

<%= image_tag "uppdrag/thumbs/katja01.png", :class => "ids", :id => asset_path "katja01.png" %>

etc