Using the asset pipeline for images in javascript on Rails?

Question

So I have an app in production, and I have a rating system with different star images that users can click to rate movies.

Now the images aren't loading correctly in the browser when I inspect element it looks like this:

<img src="/assets/star-off.png" alt="1" title="not rated yet">

But the image itself isn't showing and when I hover over it, it says "Failed to load the given url. I'm not sure if the images should be uploading to S3 or what's happening.. There are other images on the website that have similar looking paths that load just fine..

Below is the code where the star images are stored (star-off.png, star-half.png etc...)

assets/javascript/rateit.js.erb

$.fn.raty.defaults = {
        cancel          : false,
        cancelHint      : 'cancel this rating!',
        cancelOff       : 'cancel-off.png',
        cancelOn        : 'cancel-on.png',
        cancelPlace     : 'left',
        click           : undefined,
        half            : false,
        halfShow        : true,
        hints           : ['bad', 'poor', 'regular', 'good', 'gorgeous'],
        iconRange       : undefined,
        mouseover       : undefined,
        noRatedMsg      : 'not rated yet',
        number          : 5,
        path            : 'img/',
        precision       : false,
        round           : { down: .25, full: .6, up: .76 },
        readOnly        : false,
        score           : undefined,
        scoreName       : 'score',
        single          : false,
        size            : 16,
        space           : true,
        starHalf        : 'star-half.png',
        starOff         : 'star-off.png',
        starOn          : 'star-on.png',
        target          : undefined,
        targetFormat    : '{score}',
        targetKeep      : false,
        targetText      : '',
        targetType      : 'hint',
        width           : undefined
    };

now If i put it in an asset path like:

            starHalf        : <% asset_path('star-half.png') %>,
            starOff         : <% asset_path('star-off.png') %>,
            starOn          : <% asset_path('star-on.png') %>,

And in the browser this returns this:

<img src="/assets//assets/star-off-8fc67a767a197757fa4b6033012cd122.png" alt="1" title="not rated yet"> with (failed to load the given url when I hover over the broken image)

How do I get this working? I've even tried <% image_tag('star-half.png') %> with no luck.

Please help!

Lots of info on SO .. http://stackoverflow.com/questions/7381041/url-of-images-in-javascript-code-using-rails-3-1-asset-pipeline/7383571#7383571 — Upperstage, Jun 16 '14 at 18:03
Thanks Upperstage, I thought for sure that would do it, I followed those interactions and stored the asset_path in a var. But It' still returning the same path with assets//assets/star-off..etc.. — user3399101, Jun 16 '14 at 18:14
Change the title of your question to include RoR and asset precompile and remove jQuery - maybe a RoR developer more experienced than me will answer. I used the link above to use asset_path in my JS and CSS. — Upperstage, Jun 16 '14 at 18:16

score 1 · Answer 1 · answered Dec 15 '15 at 20:03

What you did was correct. The other part that needs to change is the call to raty, to remove the path config.

For example:

  $('.readonly-stars').raty({
    score: function() {
      return $(this).attr('data-score');
    },
    half: true,
    path: '/assets/', <-- remove this config, it's the source the second assets
    readOnly: true,
    hints: ['1', '2', '3', '4', '5']
});

score 0 · Answer 2 · answered Jun 17 '14 at 04:46

Normally what you are describing should work; I do what I think you are describing all the time, and it works, in the sense that <%= asset_path('something.png') %> is the right way to embed a URL to an app image or other asset in javascript or css.

So you've got that part right, but something else must be going wrong. You've got a lot of different parts there. While you ought to be able to put together raty in the Rails asset pipeline yourself like you're trying to, there are a lot of layers of glue to get right, where if you don't understand what's going on you can slip up.

So, you might find it helpful that someone has put together a gem for raty that tries to do the Rails glue for you, doing it right. I haven't tried it myself (or ever used raty), but:

https://github.com/bmc/jquery-raty-rails

Using the asset pipeline for images in javascript on Rails?

2 Answers2