Spec-Zone.ru › Ruby on Rails 7.2

модуль ActionView::Helpers::AssetTagHelper

Включенные модули:
ActionView::Helpers::AssetUrlHelper, ActionView::Helpers::TagHelper

Справочные методы Action View для тегов активов

Этот модуль предоставляет методы для создания HTML-тегов, связывающих представления с активами, такими как изображения, JavaScript, таблицы стилей и ленты новостей. Эти методы не проверяют существование активов перед их связыванием:

image_tag("rails.png")
# => <img src="/assets/rails.png" />
stylesheet_link_tag("application")
# => <link href="/assets/application.css?body=1" rel="stylesheet" />

Публичные методы экземпляра

audio_tag(*sources) Показать исходный код
# File actionview/lib/action_view/helpers/asset_tag_helper.rb, line 593
def audio_tag(*sources)
  multiple_sources_tag_builder("audio", sources)
end

Возвращает HTML-тег аудио для sources. Если sources является строкой, возвращается один тег аудио. Если sources является массивом, возвращается тег аудио с вложенными тегами источника для каждого источника. sources могут быть полными путями, файлами, находящимися в вашем каталоге public audios, или прикреплёнными элементами Active Storage.

Если последний параметр — это хэш, вы можете добавить HTML-атрибуты, используя этот параметр.

audio_tag("sound")
# => <audio src="/audios/sound"></audio>
audio_tag("sound.wav")
# => <audio src="/audios/sound.wav"></audio>
audio_tag("sound.wav", autoplay: true, controls: true)
# => <audio autoplay="autoplay" controls="controls" src="/audios/sound.wav"></audio>
audio_tag("sound.wav", "sound.mid")
# => <audio><source src="/audios/sound.wav" /><source src="/audios/sound.mid" /></audio>

Объекты Active Storage (аудиофайлы, загруженные пользователями вашего приложения):

audio_tag(user.name_pronunciation_audio)
# => <audio src="/rails/active_storage/blobs/.../name_pronunciation_audio.mp3"></audio>
auto_discovery_link_tag(type = :rss, url_options = {}, tag_options = {}) Показать исходный код
# File actionview/lib/action_view/helpers/asset_tag_helper.rb, line 271
def auto_discovery_link_tag(type = :rss, url_options = {}, tag_options = {})
  if !(type == :rss || type == :atom || type == :json) && tag_options[:type].blank?
    raise ArgumentError.new("You should pass :type tag_option key explicitly, because you have passed #{type} type other than :rss, :atom, or :json.")
  end

  tag(
    "link",
    "rel"   => tag_options[:rel] || "alternate",
    "type"  => tag_options[:type] || Template::Types[type].to_s,
    "title" => tag_options[:title] || type.to_s.upcase,
    "href"  => url_options.is_a?(Hash) ? url_for(url_options.merge(only_path: false)) : url_options
  )
end

Возвращает тег ссылки, который браузеры и читатели лент новостей могут использовать для автоматического определения RSS, Atom или JSON ленты. type может быть :rss (по умолчанию), :atom, или :json. Управление параметрами ссылки в формате url_for с помощью url_options. Вы можете изменить сам тег LINK в tag_options.

Параметры

  • :rel — Укажите отношение этой ссылки, по умолчанию «alternate»

  • :type — Переопределите автоматически сгенерированный тип MIME

  • :title — Укажите заголовок ссылки, по умолчанию type

Примеры

auto_discovery_link_tag
# => <link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.currenthost.com/controller/action" />
auto_discovery_link_tag(:atom)
# => <link rel="alternate" type="application/atom+xml" title="ATOM" href="http://www.currenthost.com/controller/action" />
auto_discovery_link_tag(:json)
# => <link rel="alternate" type="application/json" title="JSON" href="http://www.currenthost.com/controller/action" />
auto_discovery_link_tag(:rss, {action: "feed"})
# => <link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.currenthost.com/controller/feed" />
auto_discovery_link_tag(:rss, {action: "feed"}, {title: "My RSS"})
# => <link rel="alternate" type="application/rss+xml" title="My RSS" href="http://www.currenthost.com/controller/feed" />
auto_discovery_link_tag(:rss, {controller: "news", action: "feed"})
# => <link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.currenthost.com/news/feed" />
auto_discovery_link_tag(:rss, "http://www.example.com/feed.rss", {title: "Example RSS"})
# => <link rel="alternate" type="application/rss+xml" title="Example RSS" href="http://www.example.com/feed.rss" />
favicon_link_tag(source = "favicon.ico", options = {}) Показать исходный код
# File actionview/lib/action_view/helpers/asset_tag_helper.rb, line 312
def favicon_link_tag(source = "favicon.ico", options = {})
  tag("link", {
    rel: "icon",
    type: "image/x-icon",
    href: path_to_image(source, skip_pipeline: options.delete(:skip_pipeline))
  }.merge!(options.symbolize_keys))
end

Возвращает тег ссылки для иконки сайта, управляемый asset pipeline.

Если страница не содержит ссылку, генерируемую этим помощником, браузеры автоматически запросят /favicon.ico, и кэшируют файл, если запрос успешен. Если иконка сайта изменится, её обновление может быть проблематичным.

Для лучшего контроля приложения могут позволить asset pipeline управлять своей иконкой сайта, сохраняя файл в app/assets/images, и используя этот помощник для генерации соответствующего тега ссылки.

Помощник получает имя файла иконки сайта в качестве первого аргумента, по умолчанию «favicon.ico», и также поддерживает параметры :rel и :type для переопределения их значений по умолчанию, «icon» и «image/x-icon» соответственно:

favicon_link_tag
# => <link href="/assets/favicon.ico" rel="icon" type="image/x-icon" />

favicon_link_tag 'myicon.ico'
# => <link href="/assets/myicon.ico" rel="icon" type="image/x-icon" />

Mobile Safari ищет другой тег ссылки, указывающий на изображение, которое будет использоваться, если вы добавите страницу в домашний экран устройства iOS. Следующий вызов сгенерирует такой тег:

favicon_link_tag 'mb-icon.png', rel: 'apple-touch-icon', type: 'image/png'
# => <link href="/assets/mb-icon.png" rel="apple-touch-icon" type="image/png" />
image_tag(source, options = {}) Показать исходный код
# File actionview/lib/action_view/helpers/asset_tag_helper.rb, line 430
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

Возвращает HTML-тег изображения для source. source может быть полным путем, файлом или элементом Active Storage.

Параметры

Вы можете добавить HTML-атрибуты, используя options. options поддерживает дополнительные ключи для удобства и соответствия:

  • :size — Предоставляется как "#{width}x#{height}" или "#{number}", поэтому "30x45" становится width="30" height="45", а "50" становится width="50" height="50". :size будет проигнорировано, если значение не соответствует формату.

  • :srcset — Если предоставлено в виде хэша или массива пар [source, descriptor] пар, каждый путь к изображению будет расширен до форматирования списка в строку.

Примеры

Активы (изображения, являющиеся частью вашего приложения):

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 (изображения, загруженные пользователями вашего приложения):

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" />
javascript_include_tag(*sources) Показать исходный код
# File actionview/lib/action_view/helpers/asset_tag_helper.rb, line 113
def javascript_include_tag(*sources)
  options = sources.extract_options!.stringify_keys
  path_options = options.extract!("protocol", "extname", "host", "skip_pipeline").symbolize_keys
  preload_links = []
  use_preload_links_header = options["preload_links_header"].nil? ? preload_links_header : options.delete("preload_links_header")
  nopush = options["nopush"].nil? ? true : options.delete("nopush")
  crossorigin = options.delete("crossorigin")
  crossorigin = "anonymous" if crossorigin == true
  integrity = options["integrity"]
  rel = options["type"] == "module" ? "modulepreload" : "preload"

  sources_tags = sources.uniq.map { |source|
    href = path_to_javascript(source, path_options)
    if use_preload_links_header && !options["defer"] && href.present? && !href.start_with?("data:")
      preload_link = "<#{href}>; rel=#{rel}; as=script"
      preload_link += "; crossorigin=#{crossorigin}" unless crossorigin.nil?
      preload_link += "; integrity=#{integrity}" unless integrity.nil?
      preload_link += "; nopush" if nopush
      preload_links << preload_link
    end
    tag_options = {
      "src" => href,
      "crossorigin" => crossorigin
    }.merge!(options)
    if tag_options["nonce"] == true
      tag_options["nonce"] = content_security_policy_nonce
    end
    content_tag("script", "", tag_options)
  }.join("\n").html_safe

  if use_preload_links_header
    send_preload_links_header(preload_links)
  end

  sources_tags
end

Возвращает HTML-тег script для каждого из предоставленных sources.

Источники могут быть путями к файлам JavaScript. Относительные пути предполагаются относительно assets/javascripts, абсолютные пути предполагаются относительно корня документа. Относительные пути предпочтительнее, используйте абсолютные пути только при необходимости.

При передаче путей расширение «.js» необязательно. Если вы не хотите добавлять «.js» к пути, extname: false можно задать в параметрах.

Вы можете изменить HTML-атрибуты тега script, передав хэш в качестве последнего аргумента.

При включенном asset pipeline вы можете передать имя вашего манифеста в качестве источника и включить другие файлы JavaScript или CoffeeScript в манифесте.

Если сервер поддерживает HTTP Early Hints, а параметр defer не включен, Rails отправит 103 Early Hints ответ, который связывает с активами.

Параметры

Если последний параметр — это хэш, вы можете добавить HTML-атрибуты, используя этот параметр. Это включает, но не ограничивается, следующими параметрами:

  • :extname — Добавить расширение к сгенерированному URL, если расширение ещё не существует. Это относится только к относительным URL.

  • :protocol — Устанавливает протокол сгенерированного URL. Этот параметр применим только в случае относительного URL и host параметров.

  • :host — Когда предоставлен относительный URL, хост добавляется к этому пути.

  • :skip_pipeline — Этот параметр используется для обхода asset pipeline, когда он установлен в true.

  • :nonce — Если установлен в true, добавляет автоматическое значение nonce, если у вас включён Content Security Policy.

  • :async — Когда установлен в true, добавляет атрибут async HTML, позволяющий браузеру получить доступ к скрипту параллельно, чтобы он мог быть обработано и выполнено как можно быстрее.

  • :defer — Когда установлен в true, добавляет атрибут defer HTML, который указывает браузеру, что скрипт должен быть выполнен после того, как документ был обработано. Кроме того, предотвращает отправку заголовков Preload Links.

  • :nopush — Указывает, следует ли использовать серверный push для данного скрипта. По умолчанию true.

Любые другие указанные параметры будут обрабатываться как HTML-атрибуты для тега script.

Для получения дополнительной информации о том, как параметры :async и :defer влияют на тег <script>, обратитесь к документации MDN.

Примеры

javascript_include_tag "xmlhr"
# => <script src="/assets/xmlhr.debug-1284139606.js"></script>

javascript_include_tag "xmlhr", host: "localhost", protocol: "https"
# => <script src="https://localhost/assets/xmlhr.debug-1284139606.js"></script>

javascript_include_tag "template.jst", extname: false
# => <script src="/assets/template.debug-1284139606.jst"></script>

javascript_include_tag "xmlhr.js"
# => <script src="/assets/xmlhr.debug-1284139606.js"></script>

javascript_include_tag "common.javascript", "/elsewhere/cools"
# => <script src="/assets/common.javascript.debug-1284139606.js"></script>
#    <script src="/elsewhere/cools.debug-1284139606.js"></script>

javascript_include_tag "http://www.example.com/xmlhr"
# => <script src="http://www.example.com/xmlhr"></script>

javascript_include_tag "http://www.example.com/xmlhr.js"
# => <script src="http://www.example.com/xmlhr.js"></script>

javascript_include_tag "http://www.example.com/xmlhr.js", nonce: true
# => <script src="http://www.example.com/xmlhr.js" nonce="..."></script>

javascript_include_tag "http://www.example.com/xmlhr.js", async: true
# => <script src="http://www.example.com/xmlhr.js" async="async"></script>

javascript_include_tag "http://www.example.com/xmlhr.js", defer: true
# => <script src="http://www.example.com/xmlhr.js" defer="defer"></script>
picture_tag(*sources, &block) Показать исходный код
# File actionview/lib/action_view/helpers/asset_tag_helper.rb, line 491
def picture_tag(*sources, &block)
  sources.flatten!
  options = sources.extract_options!.symbolize_keys
  image_options = options.delete(:image) || {}
  skip_pipeline = options.delete(:skip_pipeline)

  content_tag("picture", options) do
    if block.present?
      capture(&block).html_safe
    elsif sources.size <= 1
      image_tag(sources.last, image_options)
    else
      source_tags = sources.map do |source|
        tag("source",
         srcset: resolve_asset_source("image", source, skip_pipeline),
         type: Template::Types[File.extname(source)[1..]]&.to_s)
      end
      safe_join(source_tags << image_tag(sources.last, image_options))
    end
  end
end

Возвращает HTML-тег picture для sources. Если sources является строкой, возвращается один тег picture. Если sources является массивом, возвращается тег picture с вложенными тегами source для каждого источника. sources могут быть полными путями, файлами в каталоге public images или прикрепленными элементами Active Storage. Так как тегу picture нужен тег img, последний предоставленный вами элемент будет использован для тега img. Для полного управления тегом picture можно передать блок, который заполнит содержимое тега соответствующим образом.

Параметры

Если последний параметр — это хэш, вы можете добавить HTML-атрибуты, используя этот параметр. Помимо всех поддерживаемых HTML-параметров, поддерживаются следующие:

  • :image — Hash параметров, которые передаются непосредственно помощнику image_tag.

Примеры

picture_tag("picture.webp")
# => <picture><img src="/images/picture.webp" /></picture>
picture_tag("gold.png", :image => { :size => "20" })
# => <picture><img height="20" src="/images/gold.png" width="20" /></picture>
picture_tag("gold.png", :image => { :size => "45x70" })
# => <picture><img height="70" src="/images/gold.png" width="45" /></picture>
picture_tag("picture.webp", "picture.png")
# => <picture><source srcset="/images/picture.webp" /><source srcset="/images/picture.png" /><img src="/images/picture.png" /></picture>
picture_tag("picture.webp", "picture.png", :image => { alt: "Image" })
# => <picture><source srcset="/images/picture.webp" /><source srcset="/images/picture.png" /><img alt="Image" src="/images/picture.png" /></picture>
picture_tag(["picture.webp", "picture.png"], :image => { alt: "Image" })
# => <picture><source srcset="/images/picture.webp" /><source srcset="/images/picture.png" /><img alt="Image" src="/images/picture.png" /></picture>
picture_tag(:class => "my-class") { tag(:source, :srcset => image_path("picture.webp")) + image_tag("picture.png", :alt => "Image") }
# => <picture class="my-class"><source srcset="/images/picture.webp" /><img alt="Image" src="/images/picture.png" /></picture>
picture_tag { tag(:source, :srcset => image_path("picture-small.webp"), :media => "(min-width: 600px)") + tag(:source, :srcset => image_path("picture-big.webp")) + image_tag("picture.png", :alt => "Image") }
# => <picture><source srcset="/images/picture-small.webp" media="(min-width: 600px)" /><source srcset="/images/picture-big.webp" /><img alt="Image" src="/images/picture.png" /></picture>

Объекты Active Storage (изображения, загруженные пользователями вашего приложения):

picture_tag(user.profile_picture)
# => <picture><img src="/rails/active_storage/blobs/.../profile_picture.webp" /></picture>
preload_link_tag(source, options = {}) Показать исходный код
# File actionview/lib/action_view/helpers/asset_tag_helper.rb, line 355
def preload_link_tag(source, options = {})
  href = path_to_asset(source, skip_pipeline: options.delete(:skip_pipeline))
  extname = File.extname(source).downcase.delete(".")
  mime_type = options.delete(:type) || Template::Types[extname]&.to_s
  as_type = options.delete(:as) || resolve_link_as(extname, mime_type)
  crossorigin = options.delete(:crossorigin)
  crossorigin = "anonymous" if crossorigin == true || (crossorigin.blank? && as_type == "font")
  integrity = options[:integrity]
  nopush = options.delete(:nopush) || false
  rel = mime_type == "module" ? "modulepreload" : "preload"

  link_tag = tag.link(
    rel: rel,
    href: href,
    as: as_type,
    type: mime_type,
    crossorigin: crossorigin,
    **options.symbolize_keys)

  preload_link = "<#{href}>; rel=#{rel}; as=#{as_type}"
  preload_link += "; type=#{mime_type}" if mime_type
  preload_link += "; crossorigin=#{crossorigin}" if crossorigin
  preload_link += "; integrity=#{integrity}" if integrity
  preload_link += "; nopush" if nopush

  send_preload_links_header([preload_link])

  link_tag
end

Возвращает тег ссылки, который браузеры могут использовать для предварительной загрузки source. source может быть путем ресурса, управляемого конвейером активов, полным путем или URI.

Параметры

  • :type - Переопределить автоматически сгенерированный MIME-тип, по умолчанию используется MIME-тип для source расширения.

  • :as - Переопределить автоматически сгенерированное значение для атрибута, рассчитанное с использованием source расширения и MIME-типа.

  • :crossorigin - Укажите атрибут crossorigin, необходимый для загрузки ресурсов из разных доменов.

  • :nopush - Укажите, не требуется ли использование серверных push-уведомлений для ресурса. По умолчанию false.

  • :integrity - Укажите атрибут integrity.

Примеры

preload_link_tag("custom_theme.css")
# => <link rel="preload" href="/assets/custom_theme.css" as="style" type="text/css" />

preload_link_tag("/videos/video.webm")
# => <link rel="preload" href="/videos/video.mp4" as="video" type="video/webm" />

preload_link_tag(post_path(format: :json), as: "fetch")
# => <link rel="preload" href="/posts.json" as="fetch" type="application/json" />

preload_link_tag("worker.js", as: "worker")
# => <link rel="preload" href="/assets/worker.js" as="worker" type="text/javascript" />

preload_link_tag("//example.com/font.woff2")
# => <link rel="preload" href="//example.com/font.woff2" as="font" type="font/woff2" crossorigin="anonymous"/>

preload_link_tag("//example.com/font.woff2", crossorigin: "use-credentials")
# => <link rel="preload" href="//example.com/font.woff2" as="font" type="font/woff2" crossorigin="use-credentials" />

preload_link_tag("/media/audio.ogg", nopush: true)
# => <link rel="preload" href="/media/audio.ogg" as="audio" type="audio/ogg" />
stylesheet_link_tag(*sources) Показать исходный код
# File actionview/lib/action_view/helpers/asset_tag_helper.rb, line 202
def stylesheet_link_tag(*sources)
  options = sources.extract_options!.stringify_keys
  path_options = options.extract!("protocol", "extname", "host", "skip_pipeline").symbolize_keys
  use_preload_links_header = options["preload_links_header"].nil? ? preload_links_header : options.delete("preload_links_header")
  preload_links = []
  crossorigin = options.delete("crossorigin")
  crossorigin = "anonymous" if crossorigin == true
  nopush = options["nopush"].nil? ? true : options.delete("nopush")
  integrity = options["integrity"]

  sources_tags = sources.uniq.map { |source|
    href = path_to_stylesheet(source, path_options)
    if use_preload_links_header && href.present? && !href.start_with?("data:")
      preload_link = "<#{href}>; rel=preload; as=style"
      preload_link += "; crossorigin=#{crossorigin}" unless crossorigin.nil?
      preload_link += "; integrity=#{integrity}" unless integrity.nil?
      preload_link += "; nopush" if nopush
      preload_links << preload_link
    end
    tag_options = {
      "rel" => "stylesheet",
      "crossorigin" => crossorigin,
      "href" => href
    }.merge!(options)
    if tag_options["nonce"] == true
      tag_options["nonce"] = content_security_policy_nonce
    end

    if apply_stylesheet_media_default && tag_options["media"].blank?
      tag_options["media"] = "screen"
    end

    tag(:link, tag_options)
  }.join("\n").html_safe

  if use_preload_links_header
    send_preload_links_header(preload_links)
  end

  sources_tags
end

Возвращает тег ссылки на таблицу стилей для указанных в качестве аргументов источников.

При передаче путей .css расширение необязательно. Если вы не укажете расширение, .css будет автоматически добавлен. Если вы не хотите, чтобы .css добавлялся к пути, установите extname: false в параметрах. Вы можете изменить атрибуты ссылки, передав хэш в качестве последнего аргумента.

Если сервер поддерживает HTTP Early Hints, Rails отправит 103 Early Hints ответ, который ссылается на активы.

Параметры

  • :extname - Добавить расширение к сгенерированному URL, если расширение еще не существует. Это относится только к относительным URL-адресам.

  • :protocol - Устанавливает протокол сгенерированного URL-адреса. Этот параметр применяется только в случае использования относительного URL-адреса и host параметров.

  • :host - При использовании относительного URL-адреса хост добавляется к этому пути.

  • :skip_pipeline - Этот параметр используется для обхода конвейера активов, когда он установлен в значение true.

  • :nonce - Если установлено в значение true, добавляет автоматическое значение nonce, если у вас включена политика Content Security Policy.

  • :nopush - Укажите, не требуется ли использование серверных push-уведомлений для таблицы стилей. По умолчанию true.

Примеры

stylesheet_link_tag "style"
# => <link href="/assets/style.css" rel="stylesheet" />

stylesheet_link_tag "style.css"
# => <link href="/assets/style.css" rel="stylesheet" />

stylesheet_link_tag "http://www.example.com/style.css"
# => <link href="http://www.example.com/style.css" rel="stylesheet" />

stylesheet_link_tag "style.less", extname: false, skip_pipeline: true, rel: "stylesheet/less"
# => <link href="/stylesheets/style.less" rel="stylesheet/less">

stylesheet_link_tag "style", media: "all"
# => <link href="/assets/style.css" media="all" rel="stylesheet" />

stylesheet_link_tag "style", media: "print"
# => <link href="/assets/style.css" media="print" rel="stylesheet" />

stylesheet_link_tag "random.styles", "/css/stylish"
# => <link href="/assets/random.styles" rel="stylesheet" />
#    <link href="/css/stylish.css" rel="stylesheet" />

stylesheet_link_tag "style", nonce: true
# => <link href="/assets/style.css" rel="stylesheet" nonce="..." />
video_tag(*sources) Показать исходный код
# File actionview/lib/action_view/helpers/asset_tag_helper.rb, line 561
def video_tag(*sources)
  options = sources.extract_options!.symbolize_keys
  public_poster_folder = options.delete(:poster_skip_pipeline)
  sources << options
  multiple_sources_tag_builder("video", sources) do |tag_options|
    tag_options[:poster] = path_to_image(tag_options[:poster], skip_pipeline: public_poster_folder) if tag_options[:poster]
    tag_options[:width], tag_options[:height] = extract_dimensions(tag_options.delete(:size)) if tag_options[:size]
  end
end

Возвращает тег HTML видео для sources. Если sources является строкой, будет возвращен один тег видео. Если sources является массивом, будет возвращен тег видео с вложенными тегами source для каждого источника. sources может быть полными путями, файлами, которые существуют в вашем каталоге общедоступных видео, или прикреплениями Active Storage.

Параметры

Когда последним параметром является хэш, вы можете добавить атрибуты HTML с помощью этого параметра. Поддерживаются следующие параметры:

  • :poster - Установите изображение (например, снимок экрана), которое будет отображаться до загрузки видео. Путь вычисляется так же, как и src для image_tag.

  • :size - Передается как "#{width}x#{height}" или "#{number}", поэтому "30x45" становится width="30" height="45", а "50" становится width="50" height="50". :size будет проигнорировано, если значение не имеет правильного формата.

  • :poster_skip_pipeline обойдет конвейер активов при использовании параметра :poster вместо использования актива в папке public.

Примеры

video_tag("trailer")
# => <video src="/videos/trailer"></video>
video_tag("trailer.ogg")
# => <video src="/videos/trailer.ogg"></video>
video_tag("trailer.ogg", controls: true, preload: 'none')
# => <video preload="none" controls="controls" src="/videos/trailer.ogg"></video>
video_tag("trailer.m4v", size: "16x10", poster: "screenshot.png")
# => <video src="/videos/trailer.m4v" width="16" height="10" poster="/assets/screenshot.png"></video>
video_tag("trailer.m4v", size: "16x10", poster: "screenshot.png", poster_skip_pipeline: true)
# => <video src="/videos/trailer.m4v" width="16" height="10" poster="screenshot.png"></video>
video_tag("/trailers/hd.avi", size: "16x16")
# => <video src="/trailers/hd.avi" width="16" height="16"></video>
video_tag("/trailers/hd.avi", size: "16")
# => <video height="16" src="/trailers/hd.avi" width="16"></video>
video_tag("/trailers/hd.avi", height: '32', width: '32')
# => <video height="32" src="/trailers/hd.avi" width="32"></video>
video_tag("trailer.ogg", "trailer.flv")
# => <video><source src="/videos/trailer.ogg" /><source src="/videos/trailer.flv" /></video>
video_tag(["trailer.ogg", "trailer.flv"])
# => <video><source src="/videos/trailer.ogg" /><source src="/videos/trailer.flv" /></video>
video_tag(["trailer.ogg", "trailer.flv"], size: "160x120")
# => <video height="120" width="160"><source src="/videos/trailer.ogg" /><source src="/videos/trailer.flv" /></video>

Объекты Active Storage (видео, загруженные пользователями вашего приложения):

video_tag(user.intro_video)
# => <video src="/rails/active_storage/blobs/.../intro_video.mp4"></video>

© 2004–2021 David Heinemeier Hansson
Licensed under the MIT License.

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API