ActionView::Helpers::AssetTagHelper

picture_tag

API ドキュメント（Rails 8.1.4.1） ↗
def picture_tag(*sources, &block)

説明

<picture> と、その中の <source> と <img> を作ります。

引数

値を変えると、ERB と HTML が変わります。

"logo.png"
1 つだけ渡すと、image_tag と同じ <img> を中に作ります。
= nil 
"/photo.webp"
2 つ目以降の source です。2 つ以上渡すと、source ごとに <source> を作り、最後の source の <img> も作ります。<source> の type 属性の値は、拡張子から決めます。このページで試せるのは 2 つ目までです。決まらない拡張子（.avif など）なら、type 属性を追加しません。
options= {}
{alt: "Logo"}
<img> に渡す options です。image_tag の options と同じく扱います（alt、size など）。
true にすると、<source> のアセットを探さず、/images/ を前に付けたパスにします。<img> には使わないので、source が 1 つのときは何も変わりません。<img> にも使うには、options の image の Hash に skip_pipeline: true を入れます。
ヘルパー共通の options

Rails はどのヘルパーでも、これらの options を同じように処理します。HTML の仕様で <picture> に使えないものや、使う場面が少ないとこのサイトで判断したものは、ここでは省いています。

すべてのヘルパー共通

{active: true, hidden: false}
Hash を渡すと、値が false と nil 以外のキーを空白でつなぎます。配列を渡すと、nil、false、空の文字列（空白だけの文字列も）を外して、空白でつなぎます。
{controller: "tags", tags_suggestions_value: ["ruby", "rails"]}
Hash を渡すと、キーの _ を - にして、data-* 属性を追加します。値に配列や Hash を渡すと、JSON の文字列にします。
{describedby: ["name_help", "name_error"], invalid: false}
:data と同じく、aria-* 属性を追加します。値が配列なら、nil と空の文字列を外して、空白でつなぎます（何も残らなければ、追加しません）。値が Hash なら、値が false と nil 以外のキーを空白でつなぎます。
ここにない options は、<picture> の HTML 属性になります。値が nil なら、その HTML 属性は追加しません。
&block= nil
ブロックを渡すと、引数の source も more_source も、options の image と skip_pipeline も使わず、ブロックの出力を <picture> の中身にします。

ERB

直前との違い： 追加 削除 変更


          

        


        

          

            
HTML

          

          

            
            

          

        


        

          

            
プレビュー