Rails 3.1 now requires you to use image_tag when rendering an image using the asset pipeline.
I have built endless scroll into my application and have put the code into a js.coffee file. I wish to render a spinning loading gif whilst more products are loaded. I cannot use image_tag here as this file does not support rails code, but I have written it in here so you understand what I am trying to do.
jQuery ->
if $('.pagination').length
$(window).scroll ->
url = $('.pagination .next_page').attr('href')
if url && $(window).scrollTop() > $(document).height() - $(window).height() - 1200
$('.pagination').html("<%= image_tag("loading.gif") %> Loading more...")
$.getScript(url)
$(window).scroll()
Previously, I would have just written it in pure HTML, using <img src=... But this will no longer work with the asset pipeline. How can I achieve this?
Using plain HTML should work just fine.
Try using: <img src="/assets/loading.gif" /> if your loading.gif is inside assets/images.
UPDATED 21/06/2012
As per the Ruby on Rails Guide, Section 2.2.3, changing the file extension of your .js file to filename.js.erb or filename.js.coffee.erb will allow you to use embedded ruby inside your javascript.
You can then use the asset_path helper to access the path where your assets are stored.
Related
I'm working on a Rails app with an Angular-driven frontend. I want to include images from my Rails asset folders into a view that is shown only shown in certain contexts using an ng-switch directive. I tried a couple of solutions, like typing the file path of all other (Rails-served) images into the src of the <img> tag. I also tried adding an erb suffix to the coffeescript file holding the angular controller and then doing this:
$scope.logoSrc = '<%= asset_path("images/logo_grey.png") %>'
and using an ng-src directive in the image tag, but that yielded a 404.
Happy to post more of my code if it's helpful. Thanks in advance for any help!
Try the following:
$scope.logoSrc = '<%= asset_path("logo_grey.png") %>'
According to the section 2.3.3 of the Rails Guides:
If you add an erb extension to a JavaScript asset, making it something such as application.js.erb, then you can use the asset_path helper in your JavaScript code:
$('#logo').attr({
src: "<%= asset_path('logo.png') %>"
});
I need to display images on an HTML5 canvas that are in the Rails asset pipeline, but I need to know the path for the asset from JavaScript. I'm using js-routes for other parts of the application, but it doesn't appear to provide a way to get the path to something in the asset pipeline.
What's the correct way to obtain the path to a Rails asset (e.g., an image) from JavaScript?
In the Rails Asset Pipeline guide, they give an example of coding assets in your stylesheets by preprocessing the stylesheets with ERB. You can use the same technique with JavaScript, assuming you tack an .erb to the end of the filename:
var someAssetPath = "<%= asset_path('some_image.png') %>";
Checkout the js_assets(Javascript helper in rails projects) gem.
I think it is precisely what you need.
From the documentation:
Get the path to the template app/assets/javascripts/rubrics/views/index.html in javascript:
var path = asset_path('rubrics/views/index.html')
Why not add a data attribute for the path inside an element in your .erb file and then retrieve that with JQuery?
inside some_template.html.erb
<%= content_tag(:div, "", id: 'some-id', data:{path_to_asset: asset_path("some_image.png")}) %>
then in some_javascript.js
var assetPath = $("#some-id").data("pathToAsset");
For those using HAML you can do:
:javascript
var assetPath = "#{asset_path('some_image.jpg')}";
I came across the same issue in Rails 4.1 and used referencing rails assets in coffeescript for images. No additional libraries needed.
In my case, I wanted to get the stylesheet path and the hash that rails generates for cache busting made it impossible to hardcode.
What ended up working quite well for me is to assign an ID to the main stylesheet link element in the html (layout) and then use javascript to extract the href. If you want the base asset path, perhaps create a generic element with the data you need as an attribute.
Rendered HTML
<link rel="stylesheet" href="mypath/main.css" type="text/css" id="main-css">
JS
$("#main-css").attr("href"); // "mypath/main.css"
I began moving all the assets in my site to S3 and ran into a problem with my asset path.
There's a WYSIWYG editor on my site that includes images by absolute path, so when you add an image, it doesn't use the rails image_tag helper but rather adds an image like this:
<img src="/system/images/image_1.jpg" />
The problem is that in production the URL /system/images/image_1.jpg leads to a non-existant file.
Naturally, two solutions are to 1) replace the URL dynamically (gsub) when it's called and 2) to loop through the database and replace the urls.
A better solution, however, would be to rewrite the /system/images/image_1.jpg url to point to S3. How do I do that?
Thanks!
Rails 2, PDFkit 0.5.0
Im generating a PDF from a View in Rails 2 with PDFkit and everything works fine. The only thing which doesn't work is displaying pictures in the pdf.
When I look at the View in the Browser, the picture is there but its missing in the PDF. There is only a placeholder existing in the PDF.
The image_tag is looking like this:
<%= image_tag('plus.gif') %>
I also tried to realize it with a css-file but it doesn't work either.
Any ideas?
Because of the way that wkhtmltopdf works you need to specify the full path to any assets (JS, CSS, images etc), including the domain name.
This won't work:
<img src="/images/foo.png" />
This will:
<img src="http://example.com/images/foo.png" />
One workaround is to set an explicit asset host, even if it's the same server as your app is running on (see the AssetTagHelper documentation for details). Another would be to specify the hostname in the image_tag.
Instead of putting the full path each time, you can add a base tag to the head section.
<base href="http://mydomain.com" target="_blank" />
In Rails, when we include an image into the page we use image_tag helper, which generates <img> tag and adds ?nnnnn at the end of its url, so that every time an image is updated the old version would not be stuck in the cache on the client side. Same thing for SASS needed, but I can't find it in the documentation.
You should be using helpers provided by sass-rails gem https://github.com/rails/sass-rails, (scroll to Asset Helpers).
These helpers can be used from inside sass files any time you need to reference an asset (image/audio/video/font)
body{
background: asset_path($relative-asset-path, $asset-class);
}
Note: image_url("...") is not working on Rails 3.1.0.rc4 due to a bug, but you can still use asset_url and asset_path.
Using stylesheet_link_tag will do this for you, just the same as image_tag does. This also applies to JavaScript files linked in with javascript_include_tag.