0

画像に問題があります。ビューで assets_path を使用して、画像 (従業員の写真) への最終的なパスを見つけます。次に、Heroku にリポジトリのプッシュ時にすべてのアセットをプリコンパイルさせます。以前は機能していましたが、現在は写真が表示されていません。

さらに奇妙なことに、アプリの実行中に、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 は次のようになります (フラグメント - 1 つのリスト項目):

<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 属性に詳しくありません。picturefillシステムを使用しようとしていますか? もしそうなら、Heroku のアセット コンパイルではなく、そのシステム内のどこかで問題が発生していると思います。たとえば、イメージ タグを noscript と div の外に移動すると、うまくいくと思います。

于 2013-02-18T18:58:56.650 に答える