making a link to the assets folder in rails

Question

Wondering how I can overcome this problem. On the home page of my Rails app I have an image slider:

  <div id = "carousel">
    <img id ="rotate_images" src="assets/1.1.png"/>

    <div id = "back">
    <img src = "assets/arrow_back.png">
  </div>  

    <div id = "forward">
    <img src = "assets/arrow_forward.png"></div>
  </div>

The images show up correctly. Then, on another page in the same application, when I paste the same code, the images aren't showing up. In Console I get:

GET http://localhost:3000/users/assets/1.1.png 404 (Not Found) 

As I'm sure you're aware, the assets folder isn't in 'Users', it's in the 'App' folder. I thought making the links like src ="../assets/..etc" would do it but not so lucky. I'd use Rails code, like:

 <%= image_tag("arrow_forward.png") %>

but this will just cause a headache as I'm using jQuery code that matches up with my img src attributes. If it's any use, here's the jQuery code. If it could be modified to hook up with the Rails image_tag way, that would be great, but I'm really curious as to why the assets folder isn't being found correctly. Thanks for any help.

  <script>

  $('#back').on({
      'click': function () {
          var origsrc = $(rotate_images).attr('src');
          var src = '';
          if (origsrc == 'assets/3.1.png') src = 'assets/2.1.png';
          if (origsrc == 'assets/2.1.png') src = 'assets/1.1.png';
          if (origsrc == 'assets/1.1.png') src = 'assets/1.1.png';
          $(rotate_images).attr('src', src);
      }
  });

  $('#forward').on({
      'click': function () {
          var origsrc = $(rotate_images).attr('src');
          var src = '';
          if (origsrc == 'assets/1.1.png') src = 'assets/2.1.png';
          if (origsrc == 'assets/2.1.png') src = 'assets/3.1.png';
          if (origsrc == 'assets/3.1.png') src = 'assets/3.1.png';
          $(rotate_images).attr('src', src);
      }
  });
  </script>

Answer 1

you have several options here...

i assume you are running rails 3. i think that when you are running the asset-pipeline in production you will get digested and nondigested assets (image-HASHDIGEST.png). so it should be safe to use the asset-helper in your view code and hardcodes paths in your javascript.

since you are referring to code in <script> tags, i assume that this is some code that is also coming from your views, so you should be able to use erb syntax in there as well.

when using the asset-pipeline, you can also pre-process your javascript ie with erb. this is usually done by appending .erb to the files (some.js.erb) and then use asset-helper in there as well. this is probably the cleanest solution.

despite that fact, i think the asset-pipeline sucks big times, as it introduces a whole new level of complexity to rails that's overwhelming and also over-engineered for most apps.