Load SVG file with jQuery - Rails - ruby-on-rails

In development it seemed to work well, I used to load the files like this:
$(".div").load("/assets/svg_file.svg");
But now that I have pushed the project to Heroku, it gave me a 404 error inside my console. It also happened with some images I included, but it was fixed by changing the default html image tag to this:
<%= image_tag("logo.png") %>
Since I can't include any ruby code on the client side, how do I do it?

If any user faces the same issue, go to production.rb file (config => environments => production.rb) and change config.assets.compile = false to config.assets.compile = true. This should fix it.

Related

image_tag in not using asset_host

In production, when I call image_tag inside a mailer view, the image url reflects the asset host that I've set. However, when I call ActionController::Base.helpers.image_tag in a module inside lib/ it does not reflect the asset host.
This is in the production environment.
production.rb
config.action_mailer.asset_host =
config.action_controller.asset_host = Proc.new do |source|
"https://mycustomhost.com"
end
production console:
irb(main):001:0>
ActionController::Base.helpers.image_tag("my_asset.jpg")
=> ...src=\"/my_app/my_asset-b00c676835d609cc1aed3ce6e7018ee1.jpg\"..
Documentation suggests that I need to set the asset_host on ActionController::Base. I've tried both setting setting ActionController::Base.asset_host in the console/setting it in production.rb and restarting nginx, then running ActionController::Base.image_tag, but it still does not return the image url with the asset host.
Any ideas what's going on?
I got this to work by getting view_context from the mailer, and calling the helper method on that. It doesn't explain why ActionController::Base.helpers.image_tag isn't reading from asset_host though, but since I'm essentially trying to replicate the behavior of ActionView's image_tag, this approach seems better.

Why do some assets give 403 forbidden?

I am using ROR, nginx, passenger...
If there is no picture in the DB then my app will serve the 'default_avatar.png'. I noticed I was unable to save new pictures. So, I updated my dragonfly initializer to point at my db server:
...
# I have obscured the host IP for this example.
config.url_host = Rails.env.production? ? 'http://IP_OF_HOST' : 'http://localhost:3000'
...
Now I can save pictures and view them through my app, but the 'default_avatar.png' does not resolve. Oddly enough, other image assets do seem to come through. Why do I get 403? At first guess I thought it was a permissions error. But then why would it serve the other images?
UPDATE:
I have just noticed a very important clue. When the assets do not work, they have the url:
/media/jakbfAGasgAgADSGANJGFDgbnadglnalgbakljbgkjabg/default_avatar.png
And when they do work:
/assets/avatar.png
I should mention that I have 2 app servers and 1 db server. I do not believe it to be a permissions error.
I've encountered the same problem.
You need to specify the extension of the file when using the html helper provided by AssetTagHelper lib.
This will work:
<%= image_tag('avatar.png') %>
This won't work:
<%= image_tag('avatar') %>
Not easy to debug.

Generating list or paths of stylesheets and javascript files in Rails 4

I'm writing a Rails4 app that uses a custom cache manifest file which needs to include references to all the required Javascript and CSS files. Due to the nature of the application, the Rack Offline gem can't be used.
The stylesheet_link_tag and javascript_include_tag calls produce the correct list of files (as generated by the asset pipeline) but embed them in HTML tags.
Is there a way to get the paths to all the compiled javascript and stylesheet files in the controller?
eg.
/assets/custom.css?body=1
/assets/incidents.css?body=1
/assets/users.css?body=1
/assets/application.css?body=
/assets/jquery.js?body=1
/assets/bootstrap/affix.js?body=1
...
That one was fun! Had to go into the Sprockets source to figure it out.
asset_list = Rails.application.assets.each_logical_path(*Rails.application.config.assets).to_a
You can then go in a grep through the asset list, something like:
asset_list.grep(/\.(js|css)/)
EDIT:
If you want the hex digests, you could do something like:
environment = Rails.application.assets
asset_list = environment.each_logical_path(*Rails.application.config.assets).to_a
asset_list.map! { |asset| environment.find_asset(asset).digest_path rescue nil }.compact
Based on #kdeisz research, this code worked in the controller for the manifest file:
#assets = Rails.application.assets.each_logical_path(*Rails.application.config.assets).to_a
#assets = #assets.map{ |p| view_context.compute_asset_path(p) }
render 'manifest.text', content_type: 'text/cache-manifest'
The compute_asset_path function is needed to get the actual asset path.
Note: I haven't yet tested this in production mode. It works in development mode if you set config.assets.debug = false

Rails 3: Application not picking up image files

Bit of a newbie question. I can't seem to get my application to pick up images
that I have in a local folder ( public/stylesheets/images/XYZ/*.png). As a result
my main page is rendered without some essential graphics.
In my HAML file, I have tags defined as follows:
%img{:src => '/images/XYZ/scissor.png'}
This leads to calls like:
Started GET "/images/dookum.in/scissor.png' for 127.0.0.1 ....
and error messages like:
ActionController::RoutingError (No route matches "/images/dookum.in/scissor.png')
I don't know why this is happening. Do I need to define RAILS_ROOT? Or change routes.rb? If yes, then how?
Thanks for your help
Abhinav
You may try to add following setting in your environment files
config.serve_static_assets = true
Either you write
= image_tag('scissor.png')
and this will look for the file /public/images/scissor.png, or you should specify stylesheets/images/XYZ/...
Everything under /public is served in development mode, if you want you rails process to serve everything under /public in production-mode, you have to set the config.serve_static_assets to true.

Rails: Images on one server, CSS and Javascript on another

I am working on a rails app that has a bunch (hundreds) of images that are hosted on an S3 server. To have helpers like image_tag point here I had to add this to by config/environments/development.rb test.rb and production.rb:
config.action_controller.asset_host = "http://mybucket.s3.amazonaws.com"
However, this also means that it looks there for CSS and Javascript. This is a huge pain because each time I change the CSS I have to re-upload it to Amazon.
So.. Is there an easy way I can make my app look to Amazon for images, but locally for CSS/Javascript?
(I'm using Rails 3.0)
You can pass a Proc object to config.action_controller.asset_host and have it determine the result programmatically at runtime.
config.action_controller.asset_host = Proc.new do |source|
case source
when /^\/(images|videos|audios)/
"http://mybucket.s3.amazonaws.com"
else
"http://mydomain.com"
end
end
but left as it is, this would give you http://mybucket.s3.amazonaws.com/images/whatever.png when you use image_tag :whatever.
If you want to modify the path as well, you can do something very similar with config.action_controller.asset_path
config.action_controller.asset_path = Proc.new do |path|
path.sub /^\/(images|videos|audios)/, ""
end
which would give you http://mybucket.s3.amazonaws.com/whatever.png combined with the former.
There's nothing stopping you from passing full url to image_tag: image_tag("#{IMAGE_ROOT}/icon.png").
But to me moving static images (icons, backgrounds, etc) to S3 and leaving stylesheets/js files on rails sounds kinda inconsistent. You could either move them all to S3 or setup Apache for caching (if you're afraid users pulling big images will create too much overhead for Rails).
BTW, you don't have to put config.action_controller... into config files for all three environments: placing that line just in config/environment.rb will have the same effect.

Resources