Ruby on Rails AssetTagHelper

Example

To let rails automatically and correctly link assets (css/js/images) in most cases you want to use built in helpers. (Official documentation)

Image helpers

image_path

This returns the path to an image asset in app/assets/images.

image_path("edit.png") # => /assets/edit.png

image_url

This returns the full URL to an image asset in app/assets/images.

image_url("edit.png") # => http://www.example.com/assets/edit.png

image_tag

Use this helper if you want to include an <img src="" />-tag with the source set.

image_tag("icon.png") # => <img src="/assets/icon.png" alt="Icon" />

JavaScript helpers

javascript_include_tag

If you want to include a JavaScript-file in your view.

javascript_include_tag "application" # => <script src="/assets/application.js"></script>

javascript_path

This returns the path of your JavaScript-file.

javascript_path "application" # => /assets/application.js

javascript_url

This returns the full URL of your JavaScript-file.

javascript_url "application" # => http://www.example.com/assets/application.js

Stylesheet helpers

stylesheet_link_tag

If you want to include a CSS-file in your view.

stylesheet_link_tag "application" # => <link href="/assets/application.css" media="screen" rel="stylesheet" />

stylesheet_path

This returns the path of you stylesheet asset.

stylesheet_path "application" # => /assets/application.css

stylesheet_url

This returns the full URL of you stylesheet asset.

stylesheet_url "application" # => http://www.example.com/assets/application.css

Example usage

When creating a new rails app you will automatically have two of these helpers in app/views/layouts/application.html.erb

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

This outputs:

// CSS
<link rel="stylesheet" media="all" href="/assets/application.self-e19d4b856cacba4f6fb0e5aa82a1ba9aa4ad616f0213a1259650b281d9cf6b20.css?body=1" data-turbolinks-track="reload" />
// JavaScript
<script src="/assets/application.self-619d9bf310b8eb258c67de7af745cafbf2a98f6d4c7bb6db8e1b00aed89eb0b1.js?body=1" data-turbolinks-track="reload"></script>