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.
Related
When I run rails in production mode , I put the default url of avatar in assets/images and made it like this :
"/assets/" + [version_name, "image.jpeg"].compact.join('_')
it works perfevtly in development mode but in production it doesn't and I don't know why also I have pre compiled assets but still so hope you help .
If the path of your asset is:
/assets/v1_image.png
Then it will perfectly work fine in development if you used something like:
<img src="/assets/v1_image.png" />
Because in development assets are not precompiled by Rails asset pipeline.
But in production the asset pipeline will compile your assets and stamp it with some md5hash so your file name will end-up to be like:
/assets/v1_image-aee4be71f1288037ae78b997df388332edfd246471b533dcedaa8f9fe156442b.png
So the correct way to use it should be something like:
<img src="/assets/v1_image-aee4be71f1288037ae78b997df388332edfd246471b533dcedaa8f9fe156442b.png" />
but still this md5 hash will change from a deployment to another so the rails way to handle this is to use image_path, image_url or image_tag helpers from ActionView::Helpers::AssetUrlHelper to generate the correct path for you as follows:
image_tag('v1_image.png') will return:
<img src="/assets/v1_image-aee4be71f1288037ae78b997df388332edfd246471b533dcedaa8f9fe156442b.png" />
image_path('v1_image.png') will return:
/assets/v1_image-aee4be71f1288037ae78b997df388332edfd246471b533dcedaa8f9fe156442b.png
image_url('v1_image.png') will return:
http://www.example.com/assets/v1_image-aee4be71f1288037ae78b997df388332edfd246471b533dcedaa8f9fe156442b.png
I hope this is clear enough and can fix your problem :)
The problem could be due to /assets interfering with rails asset pipeline.
Please post your code for a better understanding of the question
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.
I have a rails 4 app that properly uses config.action_controller.asset_host = "xxxxxxx.cdn.com" to render asset urls to point to a CDN.
The app also has a documentation site that uses jekyllrb. Now I want to be able to reference assets from a CDN also but no luck so far.
I'm not able to find documentation about how to setup CDN host for doc site.
I'm trying stuff like this:
<img type="image/svg+xml" src="{{ '/docs/images/' | append: page.logo_image | asset_url}}">
but no luck, I just get the image url but no cdn stuff. All that I found are Shoppify links (I think also use Liquid)
Any hint is more than welcome!
thanks
Found this:
Jekyll configuration for CloudFront To make it easy to serve my assets
from CloudFront, I set up a custom Liquid filter:
module Jekyll
module AssetFilter
def cdn(input)
"#{#context.registers[:site].config['cdn']}/#{input}"
end
end
end
Liquid::Template.register_filter(Jekyll::AssetFilter)
Save this in _plugins/cdn.rb off the root of your Jekyll site’s directory.
Then I added a CDN entry to my _config.yml file. If I comment this line out, my
assets will be served off of S3 (or localhost if I’m running Jekyll locally).
cdn: http://cdn.maxmasnick.com
Whenever I want an asset to be served by the CDN, I pass it through this Liquid filter. For example, in my layout file I have:
<link rel="stylesheet" href="{{ "assets/css/frameless.css" | cdn }}" />
Source:
http://www.maxmasnick.com/2012/01/21/jekyll_s3_cloudfront/
I want to know how to show images in email by using roadie gem. Using roadie i'm able to inline my stylesheets but it's not showing images. I have tried both
<%= image_tag "pic.jpg" %>
and
<img src="pic.jpg"/> or <img src="assets/images/pic.jpg"/>
inside my mail template, but it's not showing any of the images. Any help?
It's been a long time since I asked this question and I was pretty new to rails development so didn't really know what I was doing wrong. Anyways so the issue is when we use image_tag helper or asset_path helpers for rendering images, it makes relative paths for that image(you can check it in firebug or some other tool) and they won't work inside emails or lets say on any other remote server (other than where the app is hosted)
Fix:
You can specify where your assets are hosted by:
config.action_controller.asset_host = 'http://your_server.com'
Quite old, but if somebody needs this...
Usually I use:
%img{:src => asset_url('/email/logo.png') }
also, as mentioned in the comments, be sure to have config.action_mailer.asset_host configured
example:
config.action_mailer.asset_host = "http://localhost:3000/assets/"
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!