Rails 在 HTML-Output 上的错误位置插入元素。语法错误？

Question

这可能很简单，但我现在尝试了更长的时间来解决它。

我有一个辅助方法 picture(file, alt) 和一个自定义的 image-tag 用于 Markdown 转换器 RedCarpet。

辅助方法使用给定文件和 alt-text 创建一个 <picture> 标签。自定义 Redcarpet 渲染器使用此 picture(file, alt) 方法组成 div.image，包括 picture-tag 和附加标题。 div.caption 应该在 div.image 内的 <picture> 标签之后。但出于某种原因，我的 RedCarpet 渲染器将 div.caption 包含到 <picture> 标签中。

喜欢：

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

视觉上它工作得很好，但根据 W3C 验证程序，它应该在外面。

如何获得 div.caption 取代 picture-tag？另外，这是从方法输出 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> 正确关闭的原因。

"Additionally, is this a good way of outputting HTML from a method?"

通常，我在辅助操作中构建可渲染视图时使用 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

Rails 在 HTML-Output 上的错误位置插入元素。语法错误？

Rails is inserting element in the wrong position on HTML-Output. Wrong Syntax?

ruby-on-rails

image

markdown

redcarpet