Best way to display images from a Rails Asset Pipeline using AngularJS?

Question

I am working on a Rails application with the Angular-driver interface. I want to include images from my Rails resource folders in a view that is shown only in certain contexts using the directive ng-switch. I tried a couple of solutions, for example, by entering the file path of all the other (Rails-served) images in the tag srctag <img>. I also tried adding the erb suffix to the coffeescript file containing the angular controller, and then doing the following:

$scope.logoSrc = '<%= asset_path("images/logo_grey.png") %>'

and using the directive ng-srcin the image tag, but that gave 404.

I will gladly post more of my code if this is helpful. Thanks in advance for your help!

Answer 1

Try the following:

$scope.logoSrc = '<%= asset_path("logo_grey.png") %>'

According to section 2.3.3 of the Rails manual:

If you add the erb extension to the JavaScript resource, making it something like application.js.erb, then you can use the resource_path helper in your JavaScript code:

$('#logo').attr({
  src: "<%= asset_path('logo.png') %>"
});