AngularJS指令和模板中的Rails图像资产 [英] Rails Image assets in AngularJS Directive and template

问题描述

我使用这些宝石在AngularJS中使用Rails 4应用程序:

I have Rails 4 Application with AngularJS using these gems:

• gem'angularjs-rails'
• gem'angular-rails-templates'
• gem'asset_sync'

与这样的模板配合使用效果很好:

It works great with a template like this:

    <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

The Image render correctly. However in my other 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.

I got 'assets/feed.icon.heart.png' was not found error from the browser console. I have feed.icon.heart.png located under app/assets/feed.icon.heart.png.

ps:忘了提一下，我使用资产同步gem在Amazon s3中托管资产.该图像在开发中效果很好，但在生产中效果不佳.

ps: Forget to mention I use assets sync gem to host assets in amazon s3. the image worked well in development but not in production.

推荐答案

硬编码的资产链接仅在开发中有效，因为在生产中资产已进行预编译.除其他外，这意味着文件名从以下位置更改:

Hardcoded asset links only work in development because in production the assets get precompiled. Which means, amongst other things, the filename changes from:

my_image.png

变成这样的东西(它添加了唯一的md5-hash):

into something like this (it adds and unique md5-hash):

"my_image-231a680f23887d9dd70710ea5efd3c62.png"

尝试一下:

将javascript文件扩展名更改为:yourjsfile.js.erb

Change the javascript file extension to: yourjsfile.js.erb

以及以下链接:

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

为了更好地理解 查看全文