Question

我遇到图像问题，我在视图中使用assets_path来确定图像的最终路径（员工照片）。然后我让Heroku预先编译所有资产推送回购。它以前工作，但现在照片没有显示。

更奇怪的是，在运行应用程序时，html生成正确（在视图页面源中看到...照片src网址可以复制并粘贴到浏览器中，他们检索正确的资产！）但照片不是在页面上显示。

这是观点。 '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>

...现在当您手动将资产网址复制并粘贴到浏览器标记中时（/assets/employees/small/marcy_dakss-84bb6d3482d0af4667d24f8cd7017c7f.jpg），会显示照片！

我觉得我尝试过这方面的一切，你有解决类似图像问题的经验吗？

Answer 1

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

Heroku不加载图像，虽然它们是预编译的并且url（在html中）是正确的

1 个答案: