channa ly channa ly - 1 year ago 75
AngularJS Question

Rails Image assets in Angular Directive and template

I have Rails 4 Application with Angular js using these gems

  • gem 'angularjs-rails'

  • gem 'angular-rails-templates'

  • gem 'asset_sync'

It works great with template like

<img ng-controller='LikePostController'
class='lazy post_photo pt_animate_heart'

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' /> ");

element.on('dblclick', function(event){
$animateObj = $(this);
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.

Answer Source

Hardcoded asset links only work in development because in production the assets get precompiled. Which means, amongst other things, the filename changes from:


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


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