I have an svg in an external file that I want to reference with a use statement in Rails.
If I do:
%svg
%use{"xlink:href" => "assets/icon.svg#test"}
which generates the html:
<svg>
<use xlink:href="assets/icon.svg#test"></use>
</svg>
Everything works as expected.
However I want this to be able to work with sprockets asset versioning in a similar way to how image_tag works.
I tried to do:
%svg
%use{"xlink:href" => image_url("icon.svg#test")}
This generates the html:
<svg>
<use xlink:href="http://0.0.0.0:5000/assets/icon.svg#test"></use>
</svg>
The asset certainly exists at http://0.0.0.0:5000/assets/icon.svg, but the icon does not show.
What am I doing wrong? How do I use sprockets asset helpers with svg use statements?
Asset cannot exist at 0.0.0.0, it is not a real ip, you need to set config.action_controller.asset_host
In development 127.0.0.1(loopback ip) will do
Seems to be a cross origin browser security issue.
Google chrome actually gives a message that helps with this. (I was previously using firefox so didn't notice this...)
Unsafe attempt to load URL http://0.0.0.0:5000/assets/icon.svg from frame with URL http://localhost:5000/. Domains, protocols and ports must match.
The domain names much match for it to work.
In my opinion, this can be fixed by using image_path instead of image_url. That way you should get a relative link to the SVG file, i.e. precisely the same output as in your raw HTML, possibly with just the asset hash added to the file name.
Related
I have a question about using asset_sync and a Heroku CDN. In this article, it says
Make sure you’re using the Rails AssetTagHelper methods (like
image_tag). This will ensure all of your assets will reference the new
asset host.
Does that mean any plain html <img> tags or refs in my app won't work? Or maybe it's just to warn against tags with an absolute URL?
EDIT: I know I can and should use image_tag and image_path in views or css. What I'm asking is, do I HAVE to?
They will work but you will need to point it manually to where you are syncing your assets to, some bucket on Amazon S3. Not really recommended unless your assets will hardly ever change.
You configure your asset path in your production.rb config like so:
config.action_controller.asset_host = "http://assets.domain.com"
Then whenever you reference asset_path it will point to the asset on the host defined in your environment config.
Perhaps a solution (without understanding your exact problem) would be to do something like this:
<img src="<%= asset_path("image.png") %>" />
You should to use
<%= image_path("logo.png") %>
instead of
<img src="<%= asset_path("image.png") %>" />
You can more details about this helper method here. Also As specified by andrew you need to specify asset_host in you config file. Here is a small blogpost for the same
Also:
If you want to pull css background icons/images from amazon s3 then use:
background-image: image_url("icon.png"); // it requires scss extension ie saas and also you must has saas rails gem included.
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!
Chrome DevTools Autosave doesn’t work with Rails Asset Pipeline. The culprit of the problem is in the assets URLs — I cannot decipher the actual file path by its URL. For example, /assets/application.css may refer to either app/assets/stylesheets/application.css, lib/assets/stylesheets/application.css,
or vendor/assets/stylesheets/application.css.
I wonder, how do I change assets URL to one of the following:
/app/assets/stylesheets/application.css (matches exactly actual file path, perfect solution)
/assets/application.css?source_url=app/assets/stylesheets/application.css (introduces source_url query parameter)
I would appreciate any help writing Rails plugin for that.
Update: I filled an issue to sprockets.
I'll try to get the ball rolling, but I'd have to do a lot more to verify or provide a better answer, so I'll mark this answer community wiki. That way others can answer below and or edit this post.
I've had to set up asset pipelining for Sinatra, and generally speaking, in the latest versions of Sprockets (which is used to provide the asset pipelining in Rails) the Sprockets::Asset class has methods to obtain the path and logical path.
I believe Rails uses the asset_path helper to generate the public facing url from the Sprockets class. This in turn appears to use the AssetPaths#compute_public_path instance method. A good first step would be to modify these parts of the code to add a source_url parameter based on your parsing of the source.pathname. This is assuming that source is an instance of Sprockets::Asset in some form or another.
I'm not quite sure how you expect the source to come from but it's already provided by ActionView::Helpers::AssetTagHelper
http://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html
image_tag("rails.png")
# => <img alt="Rails" src="http://assets.example.com/images/rails.png?1230601161" />
stylesheet_link_tag("application")
# => <link href="http://assets.example.com/stylesheets/application.css?1232285206" media="screen" rel="stylesheet" type="text/css" />
I have a Rails 3.1 app that uses the codebrew/backbone-rails. In a .jst.ejs template, I would like to include an image, like so:
<img src="<%= image_path("foo.png") %>"/>
But of course the asset helpers are not available in JavaScript.
Chaining ERB (.jst.ejs.erb) does not work, because the EJS syntax conflicts with ERB.
Here is what I know:
The asset helpers are not available in the browser, so I need to run them on the server side.
I can work around the problem by making the server dump various asset paths into the HTML (through data attributes or <script> and JSON) and reading them back in JS, but this seems rather kludgy.
Is there a way to somehow use the asset helpers in EJS files?
There is a way, actually, to chain a .jst.ejs.erb file, although it's fairly undocumented, and I only found it through looking at the EJS test cases. You can tell EJS to use {{ }} (or [% %] or whatever else you want) instead of <% %>, and then ERB won't try to evaluate your EJS calls.
Make sure to require EJS somewhere in your code (I just included gem 'ejs' in my Gemfile), and then create an initializer (I called it ejs.rb) that includes the following:
EJS.evaluation_pattern = /\{\{([\s\S]+?)\}\}/
EJS.interpolation_pattern = /\{\{=([\s\S]+?)\}\}/
Then just make sure to rename your templates to .jst.ejs.erb, and replace your existing <% %> EJS-interpreted code with {{ }}. If you want to use something other than {{ }}, change the regular expressions in the initializer.
I wish there were an option in Sprockets to handle this through the config rather than having to explicitly include EJS, but as of the moment, there's no way to do that that I know of.
I can see two ways. Neither are great.
When you say <%%= variable %> then this is rendered by ERB as <%= variable %>, so you could double percent escape everything but the asset_tags and that would survive the trip through one ERB pass on the way to EJS.
If you find that too gross...
How about making a different javascript file, with an ERB extension, that defines your asset paths? And then use the asset pipeline to require that.
So say assets.js.erb defines something like:
MyAssets = {
'foo': <%= image_path("foo.png") %>,
...
}
And then require this somewhere near the top of your manifest. And then reference the globals however that works in EJS.
For those willing to try HAML instead of EJS: Using haml-coffee through haml_coffee_assets has worked well for me as well.
You can have the following in a .hamlc.erb file:
%img(src="<%= image_path('foo.png') %>")
(It still doesn't give you routing helpers though, only asset helpers.)
Ryan Fitzgerald was kind enough to post a gist of his JavaScript asset helpers (which get precompiled with ERB): https://gist.github.com/1406349
You can use corresponding Javascript helper via the following gem:
https://github.com/kavkaz/js_assets
Finally (after installing and configuring) you will be able to use it like this:
<img src="<%= asset_path("foo.png") %>"/>
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" />