method

image_tag

v2.1.0 - Show latest stable - 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 or a file that exists in your public images directory.

Options

You can add HTML attributes using the options. The options supports three additional keys for convenience and conformance:

:alt - If no alt text is given, the file name part of the source is used (capitalized and without the extension)
:size - Supplied as "{Width}x{Height}", so "30x45" becomes width="30" and height="45". :size will be ignored if the value is not in the correct format.
:mouseover - Set an alternate image to be used when the onmouseover event is fired, and sets the original image to be replaced onmouseout. This can be used to implement an easy image toggle that fires on onmouseover.

Examples

 image_tag("icon")  # =>
   <img src="/images/icon" alt="Icon" />
 image_tag("icon.png")  # =>
   <img src="/images/icon.png" alt="Icon" />
 image_tag("icon.png", :size => "16x10", :alt => "Edit Entry")  # =>
   <img src="/images/icon.png" width="16" height="10" alt="Edit Entry" />
 image_tag("/icons/icon.gif", :size => "16x16")  # =>
   <img src="/icons/icon.gif" width="16" height="16" alt="Icon" />
 image_tag("/icons/icon.gif", :height => '32', :width => '32') # =>
   <img alt="Icon" height="32" src="/icons/icon.gif" width="32" />
 image_tag("/icons/icon.gif", :class => "menu_icon") # =>
   <img alt="Icon" class="menu_icon" src="/icons/icon.gif" />
 image_tag("mouse.png", :mouseover => "/images/mouse_over.png") # =>
   <img src="/images/mouse.png" onmouseover="this.src='/images/mouse_over.png'" onmouseout="this.src='/images/mouse.png'" alt="Mouse" />
 image_tag("mouse.png", :mouseover => image_path("mouse_over.png")) # =>
   <img src="/images/mouse.png" onmouseover="this.src='/images/mouse_over.png'" onmouseout="this.src='/images/mouse.png'" alt="Mouse" />

Show source

# File actionpack/lib/action_view/helpers/asset_tag_helper.rb, line 428
      def image_tag(source, options = {})
        options.symbolize_keys!

        options[:src] = path_to_image(source)
        options[:alt] ||= File.basename(options[:src], '.*').split('.').first.to_s.capitalize

        if size = options.delete(:size)
          options[:width], options[:height] = size.split("x") if size =~ %r{^\d+x\d+$}
        end

        if mouseover = options.delete(:mouseover)
          options[:onmouseover] = "this.src='#{image_path(mouseover)}'"
          options[:onmouseout]  = "this.src='#{image_path(options[:src])}'"
        end

        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