ActionView::Helpers::AssetTagHelper

picture_tag

API docs (Rails 8.1.4.1) ↗
def picture_tag(*sources, &block)

Description

Creates a <picture> with <source> and <img> inside.

Arguments

Changing a value updates the ERB and HTML.

"logo.png"
With a single source, puts the same <img> as image_tag inside.
= nil 
"/photo.webp"
The second and later sources. With two or more sources, creates a <source> for each, plus an <img> for the last one. Each <source> gets its type from the extension. This page lets you try up to the second. If the extension gives no type (such as .avif), no type attribute is added.
options= {}
{alt: "Logo"}
Options for the <img>, handled the same way as image_tag's options (alt, size, etc.).
true skips the asset lookup for each <source> and prepends /images/ to the paths. Does not apply to the <img>, so a single source is unaffected. To apply it to the <img> as well, put skip_pipeline: true in the :image hash.
Common options

Rails handles these options the same way in every helper. Options the HTML spec does not allow on the <picture>, and ones this site considers rarely used, are not listed here.

Shared by all helpers

{active: true, hidden: false}
A hash gives the keys whose values are not false or nil, joined with spaces. An array gives its elements joined with spaces, after removing nil, false and empty strings (including whitespace-only strings).
{controller: "tags", tags_suggestions_value: ["ruby", "rails"]}
A hash adds data-* attributes, with _ in the keys converted to -. Array and hash values are converted to JSON strings.
{describedby: ["name_help", "name_error"], invalid: false}
Like :data, adds aria-* attributes. Array values are joined with spaces, leaving out nil and empty strings (nothing is added if none remain). For a hash value, the keys whose values are not false or nil are joined with spaces.
Any other options become HTML attributes of the <picture>; those with a nil value are left out.
&block= nil
With a block, ignores the source and more_source arguments and the :image and :skip_pipeline options, and uses the block's output as the content of the <picture>.

ERB

Changes from the previous output: Added Removed Changed


          

        


        

          

            
HTML

          

          

            
            

          

        


        

          

            
Preview