method

image_tag

Ruby on Rails latest stable (v7.1.3.2) - 5 notes - Class: ActionView::Helpers::AssetTagHelper

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" height="45", and "50" becomes width="50" 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" />

Show source

# File actionview/lib/action_view/helpers/asset_tag_helper.rb, line 418
      def image_tag(source, options = {})
        options = options.symbolize_keys
        check_for_image_tag_errors(options)
        skip_pipeline = options.delete(:skip_pipeline)

        options[:src] = resolve_asset_source("image", source, skip_pipeline)

        if options[:srcset] && !options[:srcset].is_a?(String)
          options[:srcset] = options[:srcset].map do |src_path, size|
            src_path = path_to_image(src_path, skip_pipeline: skip_pipeline)
            "#{src_path} #{size}"
          end.join(", ")
        end

        options[:width], options[:height] = extract_dimensions(options.delete(:size)) if options[:size]

        options[:loading] ||= image_loading if image_loading
        options[:decoding] ||= image_decoding if image_decoding

        tag("img", options)
      end

September 30, 2011 - (>= v3.0.0)

1 thank

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 %>

July 10, 2008

0 thanks

watch out for urls with &

image_tag(‘x.com/aaa?a=1&b=2’) = x.com/aaa?a=1&b=2

October 31, 2008

0 thanks

By images's sub dirctionary to img tag

image_tag(“icons/edit.png”) # =>

<img src="/images/icons/edit.png" alt="edit" />

March 10, 2010

0 thanks

Specify your own template

You can specify you own template this way:

def notice
  ...
  @template = "some_other_name.html.erb"
end

June 26, 2013 - (v3.2.13)

0 thanks

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+$}

image_tag

Related methods

Options

Examples

Using a block with image_tag

watch out for urls with &

By images's sub dirctionary to img tag

image_tag(“icons/edit.png”) # =>

Specify your own template

Typing mismatch