Rails Image assets in AngularJS Directive and template

Question

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'
     />

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
    }

  }])

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: Forget to mention I use assets sync gem to host assets in amazon s3. the image worked well in development but not in production.

crispychicken · Accepted Answer · 2014-06-02T07:05:19.903

11

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

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

"my_image-231a680f23887d9dd70710ea5efd3c62.png"

Try this:

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

And the link to:

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

For better understanding The Asset Pipeline — Ruby on Rails Guides

edited Jun 02 '14 at 07:05

answered May 23 '14 at 16:59

crispychicken

2,592
2
33
50

How would you do this inside of a loop? image_url doesn't work inside of javascript interpolation. – Nathan Cox Jan 03 '15 at 21:08
You may use the gon gem: http://railscasts.com/episodes/324-passing-data-to-javascript – crispychicken Jan 04 '15 at 13:56
2

It helped me. The only thing to mention: I need to use `image_url` but not `imge-url`, I am using Rails 4.2.6 – olyv Jun 04 '16 at 15:50

petkov.np · Answer 2 · 2015-03-12T17:14:01.883

You can define the following method somewhere in your helpers, e.g. in 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

One can modify the method to work with any assets you wish, not just the ones located in subdirs of app/assets/images as in this example. The method will return a map with all the original asset names as keys and their 'compiled' names as values.

The map returned can be passed to any angular controller via ng-init (not generally recommended, but appropriate in this case):

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

To make the assets really usable in angular, define a new $scope valiable in the controller:

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

Having this in the $scope, it's possible to use assets names as usual, in e.g. ng-src directives, and this won't brake after the precompile process.

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

I like this solution, this is the only one without using `.erb` and not putting images straight into the `public` directory. But it still seems too much of a pain — Max Flex, Mar 27 '16 at 21:41
Good solution in that A) It forces you to understand a bit about the underlying asset compilation process and B) You can use a variant of this if you just need to pass in a small set of assets. Using the 'gon' gem will probably make sense at some point when you find yourself doing this all of the time. — Dave Collins, Mar 30 '16 at 17:52

score 0 · Answer 3 · answered Feb 26 '16 at 05:40

Just do the following:

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

In controller inject dependency for $rootScope and in views

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

Note: It's working great in Rails API and it assumes that you've user object available so that it could specify the correct image in the /uploads/image/ directory

Rails Image assets in AngularJS Directive and template

3 Answers3

Linked