1

これらのgemを使用して、AngularJSを使用したRails 4アプリケーションがあります:

  • gem 'angularjs-rails'
  • gem 'angular-rails-templates'
  • 宝石「asset_sync」

次のようなテンプレートでうまく機能します。

    <img ng-controller='LikePostController'  
       ng-dblclick='like(post);' 
       ng-src='{{post.photo.standard}}' 
       class='lazy post_photo pt_animate_heart'
       id='post_{{post.id}}_image'
     />

イメージは正しくレンダリングされます。しかし、私の他のjsでは

petto.directive('ptAnimateHeart', ['Helper', function(Helper){
    linkFunc = function(scope, element, attributes) {
      $heartIcon = $("#heart_icon");

      if($heartIcon.length == 0) {
        $heartIcon = $("<img id='heart_icon' src='/assets/feed.icon.heart.png' alt='Like' /> ");
        $(document.body).append($heartIcon);
      }

      element.on('dblclick', function(event){
        $animateObj = $(this);
        Helper.animateHeart($animateObj);
      });
    }
    return { 
      restrict: 'C',
      link: linkFunc
    }

  }])

ブラウザ コンソールから 'assets/feed.icon.heart.png' が見つかりませんでした。app/assets/feed.icon.heart.png の下に feed.icon.heart.png があります。

ps: 言い忘れましたが、assets sync gem を使用して、Amazon s3 でアセットをホストしています。イメージは開発ではうまくいきましたが、本番環境ではうまくいきませんでした。

4

3 に答える 3

11

ハードコーディングされたアセット リンクは、運用環境ではアセットがプリコンパイルされるため、開発環境でのみ機能します。つまり、とりわけ、ファイル名が次のように変更されます。

my_image.png

次のようなものに変換します (一意の md5-hash を追加します):

"my_image-231a680f23887d9dd70710ea5efd3c62.png"

これを試して：

JavaScript ファイル拡張子を次のように変更します。yourjsfile.js.erb

そして、次へのリンク：

$heartIcon = $("<img id='heart_icon' src='<%= image-url("feed.icon.heart.png") %>' alt='Like' /> ");

アセット パイプラインの理解を深めるため— Ruby on Rails ガイド

于 2014-05-23T16:59:50.013 に答える
0

次の手順を実行してください。

app.run(function($rootScope,$location){
$rootScope.auth_url = "http://localhost:3000"   
$rootScope.image_url = $rootScope.auth_url + "/uploads/user/image/"
});

コントローラーで、およびビューで注入dependencyします$rootScope

<img ng-src="{{user.image.url}}" width="100px" height="100px">

注：Rails APIでうまく機能しており、/uploads/image/ディレクトリ内の正しい画像を指定できるように、ユーザーオブジェクトが利用可能であると想定しています

于 2016-02-26T05:40:03.113 に答える