1

我有使用这些宝石的带有 AngularJS 的 Rails 4 应用程序：

  • 宝石'angularjs-rails'
  • 宝石'角导轨模板'
  • 宝石“资产同步”

它适用于这样的模板：

    <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中托管资产。该图像在开发中运行良好，但在生产中却不行。

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 回答
3

您可以在助手中的某处定义以下方法，例如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本示例中的子目录中的资产。该方法将返回一个映射，其中所有原始资产名称作为键，它们的“编译”名称作为值。

返回的地图可以通过ng-init（通常不推荐，但在这种情况下合适）传递给任何角度控制器：

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

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

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

有了这个$scope，就可以像往常一样在例如ng-src指令中使用资产名称，并且这不会在预编译过程之后停止。

<img ng-src={{::assets['my_image.png']}}/>
于 2015-03-12T17:08:12.073 回答
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 回答