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

veritas1 · Accepted Answer · 2014-03-01 09:59:52Z

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

answered Mar 1, 2014 at 9:59

veritas1

9,2406 gold badges31 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

abegbg Over a year ago

The only thing that happens is that I get a '/' before the filename, id="/katja02.png". I did have to have parentheses, eg. :id => asset_path("katja02.png"), but that shouldn't matter I guess.

veritas1 Over a year ago

Is that in development? If so that is correct, it will adjust to new path name for assets with fingerprints in production.

abegbg Over a year ago

Nope, that is on Heroku unfortunately. Do I need to do some config for that to work? Normal pictures works ok.

abegbg Over a year ago

Acctually, you were right. I omitted the path, eg. :id => asset_path("uppdrag/katja02.png"). Stupid misstake. Works fine now after changing the javascript.

Collectives™ on Stack Overflow

How to reference images in javascript within Rails 4 on Heroku

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related