Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Images unavailable when precompiled in the asset pipeline #2

Closed
fadzlan opened this Issue May 8, 2012 · 4 comments

Comments

Projects
None yet
5 participants

fadzlan commented May 8, 2012

Steps to reproduce the issue

  1. Complete the tutorial in http://www.kendoui.com/blogs/teamblog/posts/12-03-01/building_rails_applications_with_the_kendoui-rails_gem.aspx
  2. Add the following codes in any pages (this is copied from example in kendui's website)
<script>
  $(function() {
     $("#shoe_name").kendoAutoComplete(["Nike Free", "Saucony Series 7", "Vibram Five Fingers"]);
  });
  $(document).ready(function(){
      $("#grid").kendoGrid();
  });
</script>
<select id="dropDownList">
    <option>Item 1</option>
    <option>Item 2</option>
    <option>Item 3</option>
</select>
<script>
    $(document).ready(function(){
        $("#dropDownList").kendoDropDownList();
    });
</script>
  1. Run rails rails s
  2. Open the page that you have added the codes above. You can see the drop down box have the triangle image designating it as a drop down. If you check with firebug, the location will look like http://localhost:3000/assets/kendo/Metro/sprite.png depending on your chosen theme.
  3. Stop rails. Ctrl-C to close webrick.
  4. In the command line, run rake assets:precompile. If there is error in the file app/assets/stylesheets/scaffolds.css.scss then just delete the file right now and rerun the precompile rake task again.
  5. Run rails again. rails s
  6. You will see that the small triangle denoting the dropdown is missing right now. The location for the sprite will look like http://localhost:3000/assets/Metro/sprite.png. Notice the missing kendo path in the url as compared to the previous URL before assets precompile.
  7. Since Rails merge all the css into one application.css, the relative path of the css will be gone. You can achieve the same effect by setting config.assets.debug = false in your development.rb file. The default development settings actually includes all the css files separately for debugging purpose. By setting the config.assets.debug = false in your development.rb file, it will emulate better to the production environment.

I have tested it with Unicorn and Nginx and I have got the same results.

One way to get around this is to add something like the following into your application layout <link rel="stylesheet" href="../assets/kendo/kendo.metro.min.css">, but by using this method, you are effectively letting the application server to serve the css file instead of letting the web server to serve the file.

fadzlan commented May 8, 2012

Actually, the only sane way to solve this is to change the URL in the css file. Maybe use a URL helper.

+1

+1

@bsatrom bsatrom closed this May 3, 2013

tom302 commented Feb 19, 2014

Why was this issue closed? Is the best solution still to add a 'kendo/' prefix to all of the urls in all the .css files in the kendo-rails project?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment