Ruby on Rails Views 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>
