relative paths for accessing rails assets

ruby-on-rails ruby asset-pipeline relative-path sprockets

21,512

Solution 1

Try to use /assets/style.css not /assets/stylesheets/style.css and so on.

If there is such structure:

app
  assets
    stylesheets
    javascripts

Then to get access to files in app/assets or in app/assets/any_folder you should use path /assets/file.

Updated

Here try:

body {
    background-image: url(bg.jpg);
    background-repeat: repeat;
}

Or:

body {
    background-image: url(/assets/bg.jpg);
    background-repeat: repeat;
}

Solution 2

Rails 3.1 introduced the new Asset Pipeline. I would recommend you read over this: http://guides.rubyonrails.org/asset_pipeline.html

In your app/views/layouts/application.html.erb file, make sure you have this:

<%= stylesheet_link_tag "application", :media => "all" %>

In your app/assets/stylesheets/application.css file, make sure you have this line:

*= require_tree .

(This will ensure that any css files that you have in the app/assets/stylesheets directory will be available to your application)

in your css file you can just do this to reference images in your app/assets/images directory:

background-image: url(bg.jpg);

21,512

Author by

OrlinTheMage

I am hoping to fill this out with relevant information sometime soon.

Updated on June 20, 2020

Comments

OrlinTheMage almost 4 years

I'm stuck! xD I've been working on a Rails project and am having trouble accessing my assets using relative paths. A friend of mine is working on the html/css side of things while I'm handling the controllers and models. My friend recently gave me a batch of files structured in the following way:

app/assets/images/*.jpg
app/assets/stylesheets/*.css
app/assets/javascripts/*.js
app/assets/fonts/*.* (+some more css files in here)

Within my app/views/layouts directory, I have a layout named final.html.erb which is used for my entire webapp. I also have 1 page(html body content) that I'm trying to render with this layout in app/views/pages named final_page.html.erb ... the necessary routing is in place for the page to load; however, it only loads the context of the final_page.html.erb (no images, styling, or fonts). When I go to the console and type "rails server" and visit localhost:3000, the page shows up ... naked lol. The console outputs the following:

Started GET "/" for 127.0.0.1 at 2012-07-28 21:15:02 -0700
Connecting to database specified by database.yml
Processing by PagesController#final_page as HTML
  Rendered pages/final_page.html.erb within layouts/final (8.4ms)
Completed 200 OK in 82ms (Views: 81.0ms | ActiveRecord: 0.0ms)


Started GET "/assets/stylesheets/style.css" for 127.0.0.1 at 2012-07-28 21:15:04 -0700

ActionController::RoutingError (No route matches [GET] "/assets/stylesheets/style.css"):
  actionpack (3.2.6) lib/action_dispatch/middleware/debug_exceptions.rb:21:in `call'
  actionpack (3.2.6) lib/action_dispatch/middleware/show_exceptions.rb:56:in `call'
  railties (3.2.6) lib/rails/rack/logger.rb:26:in `call_app'
  railties (3.2.6) lib/rails/rack/logger.rb:16:in `call'
  actionpack (3.2.6) lib/action_dispatch/middleware/request_id.rb:22:in `call'
  rack (1.4.1) lib/rack/methodoverride.rb:21:in `call'
  rack (1.4.1) lib/rack/runtime.rb:17:in `call'
  activesupport (3.2.6) lib/active_support/cache/strategy/local_cache.rb:72:in `call'
  rack (1.4.1) lib/rack/lock.rb:15:in `call'
  actionpack (3.2.6) lib/action_dispatch/middleware/static.rb:62:in `call'
  railties (3.2.6) lib/rails/engine.rb:479:in `call'
  railties (3.2.6) lib/rails/application.rb:220:in `call'
  rack (1.4.1) lib/rack/content_length.rb:14:in `call'
  railties (3.2.6) lib/rails/rack/log_tailer.rb:17:in `call'
  rack (1.4.1) lib/rack/handler/webrick.rb:59:in `service'
  /usr/lib/ruby/1.9.1/webrick/httpserver.rb:138:in `service'
  /usr/lib/ruby/1.9.1/webrick/httpserver.rb:94:in `run'
  /usr/lib/ruby/1.9.1/webrick/server.rb:191:in `block in start_thread'


  Rendered /var/lib/gems/1.9.1/gems/actionpack-3.2.6/lib/action_dispatch/middleware/templates/rescues/routing_error.erb within rescues/layout (2.0ms)

I think that the problem is that I'm trying to access files using relative paths. My layout file looks like this:

<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="viewport" content="width=device-width">
<title>:: Final ::</title>
<link rel="stylesheet" type="text/css" href="../../assets/stylesheets/style.css">
<link href="../../assets/stylesheets/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width:769px) and (max-width:1000px)">
<script src="../../assets/javascripts/modernizr.js" type="text/javascript"></script>
</head>
<body>
  <%= yield %>
</body>
</html>

Also, within the body of my final_page.html.erb file, I try to access images using relative paths as well...like so:

<img src="../../assets/images/mainImg.jpg" alt="img">

My friend wrote most of this html, and he has 0 experience working with rails. I decided to change the requests for assets like so:

From:

<link rel="stylesheet" type="text/css" href="../../assets/stylesheets/style.css">

To:

<%= stylesheet_link_tag "application.css" %>

From:

<script src="../../assets/javascripts/modernizr.js" type="text/javascript"></script>

To:

<%= javascript_include_tag "application.js" %>

From:

<img src="../../assets/images/mainImg.jpg" alt="img">

To:

<%= image_tag "mainImg.jpg"  %>

This somewhat helps, as the images load, and very little of the styling comes through; however, it's way off from what it's supposed to look like. I'm thinking it's because my friend makes relative calls within the css files themselves:

body {
    background-image: url(../images/bg.jpg);
    background-repeat: repeat;
}

I've tried replacing these with url(<%= asset_path 'bg.jpg' %>) etc... but it has no effect. I've tried so many things, and have read so many posts. I'm wondering if there's a way that Rails will allow me to use relative paths. I've tried:

config.assets.enabled = false

but that doesn't help ... please ... what am I doing wrong? I don't think my friend will want to stop using relative paths for his work, as it is how he does things. The site fires up well outside of Rails, but I need it to work with Rails for my webapp. Any advice would be greatly appreciated. Thank you for having the patience for reading all of this.

P.S. I'm using Ruby 1.9.3, and Rails 3.2.6