Rails AngularJS指令和模板中的图像资源-Java 学习之路

我使用这些宝石使用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中的资产 . 图像在开发中运行良好，但在生产环境中没有 .

3 回答

11

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

my_image.png

进入这样的东西（它添加和独特的md5-hash）：

"my_image-231a680f23887d9dd70710ea5efd3c62.png"

Try this:

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

以及链接：

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

为了更好地理解The Asset Pipeline — Ruby on Rails Guides

回复于 2024-05-17T14:55:20+08:00
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 的子目录中的那些资产 . 该方法将返回一个映射，其中包含所有原始资产名称作为键，并将其'compiled'名称作为值 .

返回的 Map 可以通过 ng-init 传递给任何角度控制器（通常不推荐，但在这种情况下是合适的）：
```
<div ng-controller="NoController" ng-init="assets='<%=list_image_assets "images_dir_name"%>'"></div>
```
要使资源在角度中真正可用，请在控制器中定义一个新的 $scope valiable：
```
$scope.$watch('assets', function(value) {
  if (value) {
    $scope.assets = JSON.parse(value);
  }
});
```
在_2695878中具有此功能，可以像往常一样使用资产名称，例如 ng-src 指令，这在预编译过程后不会制动 .
```
<img ng-src={{::assets['my_image.png']}}/>
```
回复于 2024-05-17T14:55:20+08:00
0
只需执行以下操作：
```
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">
```
注意：它's working great in Rails API and it assumes that you' ve用户对象可用，以便它可以在 /uploads/image/ 目录中指定正确的图像
回复于 2024-05-17T14:55:20+08:00

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

3 回答

相关问题