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

Question

我使用这些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：忘记了，我使用资产同步gem在Amazon 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指南

Answer 2

您可以在助手中的某个位置定义以下方法，例如在app/helpers/application_helper.rb ：

def list_image_assets(dir_name)
  path = File.expand_path("../../../app/assets/images/#{dir_name}", __FILE__)
  full_paths = Dir.glob "#{path}/**.*"
  assets_map = {}
  full_paths.each do |p|
    original_name = File.basename p
    asset_path    = asset_path p[p.index("#{dir_name}")..-1]
    assets_map[original_name] = asset_path
  end
  assets_map.to_json
end

可以修改此方法以使用所需的任何资产，而不仅仅是本示例中位于app/assets/images子目录中的app/assets/images 。 该方法将返回一个地图，其中所有原始资产名称均为键，而其“已编译”名称为值。

返回的地图可以通过ng-init传递给任何角度控制器（一般不建议使用，但在这种情况下适用）：

<div ng-controller="NoController" ng-init="assets='<%=list_image_assets "images_dir_name"%>'"></div>

为了使资产真正可用，可以在控制器中定义一个新的$scope变量：

$scope.$watch('assets', function(value) {
  if (value) {
    $scope.assets = JSON.parse(value);
  }
});

将其放在$scope ，可以像往常一样使用资产名称，例如ng-src指令，并且在预编译过程后不会停止。

<img ng-src={{::assets['my_image.png']}}/>

Answer 3

只需执行以下操作：

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

在$rootScope和视图中的控制器注入dependency中

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

注意：它在Rails API中运行良好，并且假定您有可用的用户对象，以便可以在/uploads/image/目录中指定正确的图像。