CODEWITHSUNDEEP
jqueryruby-on-railsherokuruby-on-rails-4
user3399101
user3399101

Reputation: 1537

Using the asset pipeline for images in javascript on Rails?

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!

Upvotes: 0

Views: 1078

Answers (2)

ahuddles
ahuddles

Reputation: 41

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']
});

Upvotes: 1

jrochkind
jrochkind

Reputation: 23317

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

Upvotes: 0

Related Questions