使用没有 src 属性的 image_tag 助手？

Question

这可能是一个非常简单的问题，但我如何在 Ruby 中重写它？

<a href="https://yourlinkhere.com/" target="_blank" rel="noopener noreferrer"><img data-lazy="<%= image_path("assets/images/your-image.png") %>" alt="logo" /></a>

我最初是这样写的（见下文），直到我需要从 img 标签中删除 src 属性并将其替换为 data-lazy 以利用 Slick 的延迟加载功能 — 这就是我对 image_tag 助手挂断电话的地方：

<%= link_to image_tag("assets/images/your-image.png", alt: "logo"), "https://yourlinkhere.com/", target: "_blank", rel: "noopener noreferrer" %>

我想知道我是否必须在这里使用 image_path 而不是 image_tag 因为我没有包含 src 属性...除非有办法使用 image_tag 助手而不包含 src？

谢谢！我通常不会在 Rails 上使用 Ruby，但我一直在为我作为前端开发人员从事的项目学习它。难倒在这里。

Answer 1

查看image_tag的源代码我很惊讶，似乎无法使用这种方法生成没有src属性的img标签。但后来我意识到 HTML specification 的 img 标签需要 src 属性。

因此我认为你最好的选择是生成一个 img 带有空 src 值的标签，如果你的延迟加载库支持的话。

<%= link_to(
      image_tag('', alt: 'logo', data: { lazy: image_path('your-image.png') }), 
      'https://yourlinkhere.com/', 
      rel: 'noopener noreferrer', target: '_blank'
    ) %>

当您不关心无效的 HTML 时，您可以考虑使用 link_to.

的块语法手动编写 img 标签

<%= link_to(
      'https://yourlinkhere.com/', 
      rel: 'noopener noreferrer', target: '_blank') do %>
  <img alt="logo" data-lazy="<%= image_path('your-image.png') %>" />
<% end %>

使用没有 src 属性的 image_tag 助手？

Using image_tag helper without src attribute?

ruby

lazy-loading

ruby-on-rails