在导轨中的<a></a>内添加图像

Question

我正在尝试在rails中的标记中添加图像标记。这是原始代码：

<a href="assets/img/main/img9.jpg" title="Project One" data-rel="gallery" class="thumbnail fancybox">
    <img alt="" src="assets/img/main/img9.jpg" class="full-width img-responsive">
    <span class="portfolio-box-in rounded-x">
       <i class="r icon-magnifier-add"></i>
    </span>
</a>

这是我的rails转换，但是当我尝试将其转换为rails时，它的外观与原始代码中的相同。

<%= link_to "creative/main/img18.jpg", :class => "thumbnail fancybox", data_rel:"gallery", title: "Project Three"  do %>

    <%= image_tag "creative/main/img18.jpg", :class => "full-width img-
    responsive" %>
    <span class="rounded-x portfolio-box-in">
    <i class="icon-magnifier-add"></i>
    </span>

<%end%>

以下是它应该看起来

的方式

当你点击放大镜时，它看起来像这样：

在我的翻译中，它没有显示放大镜，当我点击它时，它看起来像第二张图片。

任何帮助以获得正确的格式将不胜感激。

更新

我尝试了对我的建议：

        <%= link_to image_path("creative/main/img18.jpg"), class: "thumbnail fancybox", data: { rel: "gallery" }, title: "Project Three"  do %>
        <%= image_tag "creative/main/img18.jpg", class: "full-width img-responsive" %>
        <span class="rounded-x portfolio-box-in">
                <i class="icon-magnifier-add"></i>
        </span>
            <% end %>

当我尝试时，我没有得到完整的放大镜，当我点击图像时，它没有加载更大的图像：

更新2

我检查了生成的html，它似乎与原始版本无关：

根据建议生成：

<a class="thumbnail fancybox" data-rel="gallery" title="Project Three" href="/image.creative%2Fmain%2Fimg18.jpg">
    <img class="full-width img-responsive" src="/assets/creative/main/img18-972c688b1a840ae0a8ec9b22012ae6c4aa69ca6894da2029277fa2c163b41fc0.jpg" alt="Img18" />
    <span class="rounded-x portfolio-box-in">
       <i class="icon-magnifier-add"></i>
    </span>
</a>

以下是工作代码中的原始html：

<a href="assets/img/main/img18.jpg" title="Project Three" data-rel="gallery" class="thumbnail fancybox">
        <img alt="" src="assets/img/main/img18.jpg" class="full-width img-responsive">
        <span class="portfolio-box-in rounded-x">
           <i class="r icon-magnifier-add"></i>
        </span>
    </a>

Answer 1

这不是经过测试的代码，您可以尝试一次：

<%= link_to image_path("creative/main/img18.jpg"), class: "thumbnail fancybox", data: { rel: "gallery" }, title: "Project Three"  do %>
 <%= image_tag "creative/main/img18.jpg", class: "full-width img-responsive" %>
 <span class="rounded-x portfolio-box-in">
   <i class="icon-magnifier-add"></i>
 </span>
<% end %>

Answer 2

感谢@ dp7，我能够找出问题所在。我发现有两个问题。第一个是字体真棒图标这一行icon-magnifier-add这一行似乎来自另一个图书馆而不是字体真棒所以我修复它显示为fa fa-search-plus第二个问题是第二个图像放大了没有加载因为应用无法找到图像。感谢https://stackoverflow.com/a/33757348/7039895，当我翻译时

<%= link_to ("assets/creative/main/img18.jpg"), :class => "thumbnail fancybox", data: { rel: "gallery" }, title: "Project Three"  do %>
    <%= image_tag "creative/main/img18.jpg", :class => "full-width img-responsive" %>
    <span class="rounded-x portfolio-box-in">
        <i class="fa fa-search-plus"></i>
    </span>
<% end %>