image_tag
image_tag(source, options = {})
public
Returns an HTML image tag for the source. The source can be a full path, a file, or an Active Storage attachment.
Options
You can add HTML attributes using the options. The options supports additional keys for convenience and conformance:
-
:size - Supplied as “{Width}x{Height}” or “{Number}”, so “30x45” becomes width=“30” and height=“45”, and “50” becomes width=“50” and height=“50”. :size will be ignored if the value is not in the correct format.
-
:srcset - If supplied as a hash or array of [source, descriptor] pairs, each image path will be expanded before the list is formatted as a string.
Examples
Assets (images that are part of your app):
image_tag("icon") # => <img src="/assets/icon" /> image_tag("icon.png") # => <img src="/assets/icon.png" /> image_tag("icon.png", size: "16x10", alt: "Edit Entry") # => <img src="/assets/icon.png" width="16" height="10" alt="Edit Entry" /> image_tag("/icons/icon.gif", size: "16") # => <img src="/icons/icon.gif" width="16" height="16" /> image_tag("/icons/icon.gif", height: '32', width: '32') # => <img height="32" src="/icons/icon.gif" width="32" /> image_tag("/icons/icon.gif", class: "menu_icon") # => <img class="menu_icon" src="/icons/icon.gif" /> image_tag("/icons/icon.gif", data: { title: 'Rails Application' }) # => <img data-title="Rails Application" src="/icons/icon.gif" /> image_tag("icon.png", srcset: { "icon_2x.png" => "2x", "icon_4x.png" => "4x" }) # => <img src="/assets/icon.png" srcset="/assets/icon_2x.png 2x, /assets/icon_4x.png 4x"> image_tag("pic.jpg", srcset: [["pic_1024.jpg", "1024w"], ["pic_1980.jpg", "1980w"]], sizes: "100vw") # => <img src="/assets/pic.jpg" srcset="/assets/pic_1024.jpg 1024w, /assets/pic_1980.jpg 1980w" sizes="100vw">
Active Storage blobs (images that are uploaded by the users of your app):
image_tag(user.avatar) # => <img src="/rails/active_storage/blobs/.../tiger.jpg" /> image_tag(user.avatar.variant(resize_to_limit: [100, 100])) # => <img src="/rails/active_storage/representations/.../tiger.jpg" /> image_tag(user.avatar.variant(resize_to_limit: [100, 100]), size: '100') # => <img width="100" height="100" src="/rails/active_storage/representations/.../tiger.jpg" />
Using a block with image_tag
HTML5 officially supports block-level elements in the anchor tag and Rails 3 allows you to pass a block to image_tag:
<%= image_tag(some_path) do %>
<%= content_tag(:p, "Your link text here")
<% end %>
watch out for urls with &
image_tag(‘x.com/aaa?a=1&b=2’) = x.com/aaa?a=1&b=2
By images's sub dirctionary to img tag
image_tag(“icons/edit.png”) # =>
<img src="/images/icons/edit.png" alt="edit" />
Specify your own template
You can specify you own template this way:
def notice ... @template = "some_other_name.html.erb" end
Typing mismatch
This block
if size = options.delete(:size) options[:width], options[:height] = size.split("x") if size =~ %{^\d+x\d+$} end
has type mismatch
%r{^\d+x\d+$}