Rails AngularJS指令和模板中的图像资源

Question

我使用这些宝石使用AngularJS进行Rails 4应用程序:

• 宝石'angularjs-rails'
• 宝石'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:忘记提及我使用资产同步gem来托管亚马逊s3中的资产.图像在开发中运行良好,但在生产中没有.

Answer 1

硬编码资产链接仅适用于开发,因为在生产中资产得到预编译.这意味着,除其他外,文件名更改为:

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指南