How to change image_tag source using javascript

Question

I am trying to create a toggle which is basically two images. A plus icon and a minus icon.

Unfortunately if i use "assets/" it works on development but not on production - it wont find the image. I understand its probably because of asset digesting.

$(".directions-and-alternative-options-toggle").on("click", function(){
    if($(this).hasClass("collapsed")){
      $(this).find("img").attr("src", "/assets/minimize-icon.png");
    } else {
      $(this).find("img").attr("src", "/assets/expand-icon.png");
    }
  });

  <a class="directions-and-alternative-options-toggle collapsed" type="button" data-toggle="collapse" data-target="#reveal-key-directions-in-<%= event.event_id %>" aria-expanded="false" aria-controls="collapse1">
      <%= image_tag "expand-icon.png", class: "expand-icon pull-right" %>
  </a>

is there any way to get the digested asset path?

Antonio Ganci · Accepted Answer · 2017-05-26 10:37:50Z

3

I think you have two options:

1 - Move the images (minimize-icon.png and expand-icon.png) to the public folder of your project so they are not precompiled.

2 - Use asset_path:

$(this).find("img").attr("src", "<%= asset_path('minimize-icon.png') %>");

edited May 26, 2017 at 10:37

answered May 26, 2017 at 10:31

Antonio Ganci

5155 silver badges16 bronze badges

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

1 Comment

Petros Kyriakou Over a year ago

asset_path function is not necessary but thanks for your answer

Ahmed Samir Shahin · Accepted Answer · 2017-05-26 11:58:36Z

1

How about making use of jQuery data attributes like this:

In the view:

<%= image_tag 'expand-icon.png', class: 'expand-icon pull-right', data: { collapse_icon: asset_path('collapse-icon.png'), expand_icon: asset_path('expand-icon.png')} %>

In the JS:

$('.directions-and-alternative-options-toggle').on('click', function(){
  var $img = $(this).find('img');
  if($(this).hasClass('collapsed')){
    $img.attr('src', $img.data('collapse_icon'));
  } else {
    $img.attr('src', $img.data('expand_icon'));
  }
})

edited May 26, 2017 at 11:58

answered May 26, 2017 at 9:43

Ahmed Samir Shahin

5584 silver badges15 bronze badges

4 Comments

Petros Kyriakou Over a year ago

tried this, it needs some tweaking because the data: collapse_icon for example gives this <img src="/assets/expand-icon-d759ddd8678cb3743004581f1daa01801dc26097616293b6ece0dc2418639b45.png" alt="Expand icon" /> i would need only the src of this

Ahmed Samir Shahin Over a year ago

This is the idea, when you use image_tag from the view (AKA: server side), It considers the assets digest as well, so you will always have the correct image regardless Rails.env

Petros Kyriakou Over a year ago

I understand that but i cannot give you a correct answer when your code does not work as it is.

Ahmed Samir Shahin Over a year ago

Oh replacing image_tag with asset_path You should've said before the down-vote :) Wicked!

Collectives™ on Stack Overflow

How to change image_tag source using javascript

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related