如何使用带有 srcset 属性的图片元素从 Asciidoc 源输出具有响应式图像的 HTML5？

问题描述

所以，如果我想要这样的 HTML5 输出：

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp">
  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>

（取自here）

我的 asciidoc 源会是什么样子？也许是一个带有多个图像的图形，使用自定义后端将其转换为这个图形，或者其他什么？使用 asciidoc/asciidoctor 甚至可以做到这一点吗？

解决方法

绝对有可能！
使用内置的 image 宏，您可以定义如下内容：

image::pyramid.png[regular pyramid built from four equilateral triangles,sources="pyramid.svg,pyramid.webp"]

请注意，sources 属性将在 Image 块上可用。

然后，使用自定义转换器，您可以检索此属性的值以构建 <source> 元素（包装在 <picture> 元素中）。
这是一个简化示例：

MIME_TYPES = {
  ".svg" => 'image/svg+xml',".webp" => 'image/webp'
}

def convert_image node
  target = node.attr 'target'
  sources = (node.attr 'sources','').split(',').map do |src|
    %(<source type="#{MIME_TYPES[File.extname src]}" srcset="#{src}">)
  end
  %(<picture>
#{sources.join("\n")}
<img src="#{target}" alt="#{node.alt}">
</picture>)
end

您当然可以使用其他属性来做更高级的事情。

请记住，也可以使用扩展来扩展 AsciiDoc 语法。话虽如此，在这种情况下，我认为最好使用内置的 image 宏来保留语义信息。

asciidoc asciidoctor html srcset