Rails 在 HTML 输出上的错误位置插入元素.语法错误

Question

这可能

很简单，但是我现在尝试解决它的时间更长。

我有一个辅助方法picture(file, alt)和一个用于 Markdown 转换器 RedCarpet 的自定义图像标签。

帮助程序方法使用给定文件和替代文本创建 <picture> 标记。自定义 Redcarpet 渲染器使用此picture(file, alt)方法来撰写div.image，包括图片标签和附加标题。div.caption 应该在div.image 内部的 <picture> -tag 之后。但出于某种原因，我的 RedCarpet 渲染器将div.caption 包含在 <picture> -tag 中。

喜欢：

<div class="project-body-image">
  <picture>
    ...
    <div class="caption"></div>
  </picture>
</div>

从视觉上看，它可以正常工作，但根据 W3C 验证器的说法，它应该在外面。

如何获取图片标签的div.caption 选择？此外，这是从方法输出 HTML 的好方法吗？

application_helper.rb：

def picture(file, alt)
    @html =   "<picture>" + 
                "<!--[if IE 9]><video style='display: none;''><![endif]-->" + 
                "<source media='(min-width: 0px)' sizes='1280px' srcset='" + file.url + " 1280w'>" + 
                "<!--[if IE 9]></video><![endif]-->" + 
                "<img src='" + file.url + "' alt='" + alt + "'>"
              "</picture>"
    @html.html_safe
end

custom_redcarpet.rb：

require 'redcarpet'
class CustomRedcarpet < Redcarpet::Render::HTML
  include ApplicationHelper
  # Custom Image tag like ![id](filename)
  def image(link, title, alt_text)
    # Use alt_text for record id
    # if you don't find anything return nothing: ""
    if Part.exists?(link)
      @part = Part.find(link)
      @file = @part.file
      @caption = @part.description
      @html = "<div class='project-body-image'>" + 
              picture(@file, @caption) + 
              "<div class='caption'>" + @caption + "</div>" + 
              "</div>"
      @html.html_safe
    else
      nil
    end
  end
end

Answer 1

您缺少此行末尾的+：

"<img src='" + file.url + "' alt='" + alt + "'>"

从而呈现一个未闭合的<picture>标记。但是由于我认为浏览器会自动关闭不完整的标签，那么这就是为什么您仍然会在代码片段中看到正确关闭<picture></picture>的原因。

"此外，这是从方法输出HTML的好方法吗？"

通常，我在帮助程序操作中构建可呈现视图时使用content_tag。但是由于您渲染的视图已<!--[if IE 9]>，我会像您一样这样做（使用串联字符串）。我可能做的唯一区别是使用如下所示<<-EOS使用多行字符串：

      @html = <<-EOS
<picture>
  <!--[if IE 9]><video style='display: none;''><![endif]-->
  <source media='(min-width: 0px)' sizes='1280px' srcset='#{file.url} 1280w'>
  <!--[if IE 9]></video><![endif]-->
  <img src='#{file.url}' alt='#{alt}'>"
"</picture>"
      @html.html_safe