Rails AngularJS指令和模板中的图像资源
我使用这些gem使用AngularJS进行Rails 4应用程序：
- gem’angularjs-rails’
- gem’angular-rails-templates’
- gem’asset_sync’
它适用于这样的模板：
![]()
图像渲染正确。 但是在我的其他js
petto.directive('ptAnimateHeart', ['Helper', function(Helper){ linkFunc = function(scope, element, attributes) { $heartIcon = $("#heart_icon"); if($heartIcon.length == 0) { $heartIcon = $("
"); $(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中的资产。 图像在开发中运行良好，但在生产中不运行。
硬编码资产链接仅适用于开发，因为在生产中资产得到预编译。 这意味着，除其他外，文件名更改为：
my_image.png
进入这样的东西（它添加和独特的md5-hash）：
"my_image-231a680f23887d9dd70710ea5efd3c62.png"
试试这个：
将javascript文件扩展名更改为： yourjsfile.js.erb
以及链接：
$heartIcon = $("  %/>){kind=icon}
");
为了更好地理解资产管道 – Ruby on Rails指南
您可以在助手中的某处定义以下方法，例如在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传递给任何角度控制器（通常不推荐，但在这种情况下适用）：
'">
要使资产在角度中真正可用，请在控制器中定义一个新的$scope值：
$scope.$watch('assets', function(value) { if (value) { $scope.assets = JSON.parse(value); } });
在$scope具有此function，可以像往常一样使用资产名称，例如ng-src指令，并且在预编译过程之后不会制动。
![]()
只需执行以下操作：
app.run(function($rootScope,$location){ $rootScope.auth_url = "http://localhost:3000" $rootScope.image_url = $rootScope.auth_url + "/uploads/user/image/" });
在$rootScope和视图中的控制器注入dependency中
![]()
注意：它在Rails API中运行良好，它假定您有可用的用户对象，以便它可以在/uploads/image/目录中指定正确的图像