0

我在处理图像时遇到问题，我在视图中使用 assets_path 来确定图像的最终路径（员工照片）。然后我让 Heroku 在推送 repo 时预编译所有资产。以前可以，但是现在照片不显示了。

更奇怪的是，在运行应用程序时，html 是正确生成的（如查看页面源代码中所见......照片 src url 可以复制并粘贴到浏览器中，它们会检索正确的资产！）但照片没有显示在页面上.

这是视图。'assets_path' 用于确定预编译后的最终路径：

<ol class="employees_list">
  <% employees.each do |employee| %>
  <li>
     <%= link_to employee_path(employee) do %>
       <div data-picture data-alt="Photo of <%= employee.name %>" class="photo">
         <% if employee.photo %>
           <div data-src="<%= asset_path employee.photo %>"></div>
           <div data-src="<%= asset_path employee.photo('small', 2) %>" data-media="(min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2)"></div>
           <noscript>
             <img src="<%= asset_path employee.photo %>" alt="Photo of <%= employee.name %>">
           </noscript>
         <% end %>
       </div>
     <% end %>
  </li>
 <% end %>
</ol>

奇怪的是，Heroku 输出的 html 看起来像这样（片段 - 一个列表项）：

<li>
    <a href="/employees/586">
      <div data-picture data-alt="Photo of Marcy Dakss" class="photo">
        <div data-src="/assets/employees/small/marcy_dakss-84bb6d3482d0af4667d24f8cd7017c7f.jpg"></div>
        <div data-src="/assets/employees/small/marcy_dakss@2x-de98d9acfea2e840aa039854c385007b.jpg" data-media="(min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2)"></div>
        <noscript>
          <img src="/assets/employees/small/marcy_dakss-84bb6d3482d0af4667d24f8cd7017c7f.jpg" alt="Photo of Marcy Dakss">
        </noscript>
      </div>
    </a>  
</li>

...现在，当您手动将资产 url 复制并粘贴到浏览器标签中时 (/assets/employees/small/marcy_dakss-84bb6d3482d0af4667d24f8cd7017c7f.jpg)，照片就会显示出来！

我觉得我已经尝试了一切，你有解决类似图像问题的经验吗？

4

1 回答 1

0

我对 data-src 属性不熟悉，您是否尝试使用图片填充系统？如果是这样，我猜问题出在该系统的某个地方，而不是在 Heroku 的资产编译中。例如，如果您将图像标签移到 noscript 和 div 之外，我猜它会起作用。

于 2013-02-18T18:58:56.650 回答