I have an image hosted on my rails server in the assets folder, I'd like to access this image through an url rather than using the path so that I can display it in my react component.
How can I find the url for said image so that when I go to the url the image will be displayed?
You have to use image_tag. If you have "image.png" in your assets, you can use
<%= image_tag "image.png" %>
and it will result in a URL like this
/assets/image-bb14d53a12ca1aa006defb5c0f0923aa3c946f7e2dfd534846b3a1d3b8aac72e.png
When using image_tag, Rails creates a random token for image authentication. You can't just use <img src="/assets/image.png because there is no token.
Rails' assets pipeline creates a digest of each asset and adds that to the filename, so the name is not always the same, you can't just copy it and use it forever (you can make rails recreate all the digests and all the urls are changed for example).
I can think of few options:
1 - Disable the assets pipeline digest feature
On your environment's config file, add config.assets.digest = false and now the name won't have the digest at the end. Read the docs though, since the digest is there for a reason, you can disable it but it's better to decide that after reading the doc.
https://guides.rubyonrails.org/asset_pipeline.html#turning-digests-off
2 - Move those images to /public
If you move the images to /public, they won't be compiled by the assets pipeline.
3 - Use a gem like non-stupid-digest to select which assets should have it
https://rubygems.org/gems/non-stupid-digest-assets lets you configure some assets to prevent the assets pipeline to skip the digest generation without turning off the feature for all the assets
4 - Let the assets pipeline alone and put the urls somewhere on your html
To get the correct current path of an image, you can use the helper image_path (for example: image_path('something.png') returns /assets/something-123...890.png). You can then write that on your template like:
<script>
imageUrl = '<%= image_url('something.png') %>';
</script>
And you'll have access to that imageUrl variable on your javascript code.
As far as I know, you will need to go into your public folder and then to assets.
Find the image you want and then copy it's name.
You will need to call it like: /assets/img-name-033cce876b38fb47072fb3668a5.jpg or /assets/folder/ before the image name if it's in another folder and so on.
Related
I want to use an image that is located in app/assets/revolution/assets/01.png.
I'm not using the by default app/assets/images folder. I want to use my own folder name 'revolution' where I'v made my own assets folder.
How do I give the image path in my index view? I'm trying to do it like this:
<%= image_tag ('revolution/assets/01.png') %>
You need to put that revolution folder in assets path first then you will be able access files from it.
config.assets.paths << Rails.root.join("app/assets", 'revolution')
Than only you will be able to access file from assets path like below.
<%= image_tag('01.png') %>
If you do not want to put your folder in assets images path. We have 2 ways of doing same. Either move your folder to assets/images or to public path (rails ways) in both way you can easily access file.
I think what you need is the helper asset_url
http://api.rubyonrails.org/classes/ActionView/Helpers/AssetUrlHelper.html#method-i-asset_url
But you would strongly advise you to use the default folder if you want to do that.
#mudasobwa While it's true, you don't have to be such a d..k in your reply :/. It's not as if we never coded shit when discovering new languages / libs / concepts
#Gagan Gami
You could, but you would then avoid the asset pipeline and are going to have a huge cache problem with your browser the day you replace your file while keeping the name.
I want to reference an image in the public folder that has been precompiled in prod. But, it seems that all the images have a hash on the end. (i.e., assets/image-3414fewafe313.jpg)
asset_path(photo) = assets/photo.jpg (i need the full image path with hash)
How do I reference this image in a view in Rails? Thanks!
For a view, you can just reference image_path('photo.jpg')
http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets
See also image_tag('photo.jpg') which produces a full HTML img tag.
The hash at the end of the asset's URL is the result of having the config.assets.digest parameter set to true
Quoting from http://edgeguides.rubyonrails.org/asset_pipeline.html#in-production:
In the production environment Sprockets uses the fingerprinting scheme outlined above. By default Rails assumes assets have been precompiled and will be served as static assets by your web server.
During the precompilation phase an MD5 is generated from the contents of the compiled files, and inserted into the filenames as they are written to disk. These fingerprinted names are used by the Rails helpers in place of the manifest name.
I need to iterate through multiple images via a JS file, so I am making an http request to the server to match the filename to its client-side fingerprinted equivalent. I'm getting the fingerprinted file by passing the original file through Rails.application.assets.find_asset(file).digest_path
Example, in the rails console:
Rails.application.assets.find_asset("scene1.jpg").digest_path
returns
"scene1-b691b411ad644bcf2c84ef9e30f52db9ffdf57c18fadf99872dff3ebb81fa548.jpg"
However, when I run on my local server the output is simply nil.
Using the Rails asset pipeline, assets are referenced with their logical path. In this case, you can use embedded ruby (erb) in your script by adding the .erb extension to the file, e.g.
var logo = <%= asset_path('logo.png') %>;
When this script is compiled, the ruby code will produce a reference to the asset with the current digest. The digest path is a "fingerprint" and will change as often as the assets themselves change.
To learn more about the asset pipeline, check out the ROR guide and the Sprockets documentation.
i'm pretty new to Rails and have a little question:
How can i access images in Javascript? SCSS, ERB, ... have methods like "image_path", but i didn't find something similar for Javascript.
I need it to specify the image URLs for the firefly plugin:
$.firefly({images : ['???/1.jpg', '???/2.jpg'],total : 40});
if your image in /app/assets/images/ you can simply use
/assets/1.jpg
Similarly in css, you can use
url(/assets/1.jpg)
You can follow same thing when using in javascript.
$.firefly({images : ['/assets/1.jpg', '/assets/2.jpg'],total : 40});
Note: The above methods will cause problem when your rails app is in sub-directory. In that case use relative path. Asset pre-compilation will compile all assets in public/assets directory. so your structure may be like:
public
-assets
--images
---1.png
--javascripts
--stylesheets
---style.css
so from style.css, you can use relative path like ../images/1.png
When I needed to do this, I inserted the whatever image was required on the page under a div#class and set that class as hidden in my css. Then, in javascript, I could access the image from that div.
May not be ideal solution, but couldn't think of anything else because of asset pipeline.
Also, try accessing image from ./assets/image_name.jpg
There are some image assets on my site that will always remain static, and therefore do not need the timestamp that gets appended to the images. Is there a way to not append the timestamps for certain assets?
Why not just use the regular HTML <img> element for those images? It'll be marginally faster than going through the Rails' helper too.
From the Rails docs "You can enable or disable the asset tag timestamps cache. With the cache enabled, the asset tag helper methods will make fewer expense file system calls. However this prevents you from modifying any asset files while the server is running."
ActionView::Helpers::AssetTagHelper.cache_asset_timestamps = true
Solution 1 would work, except I still need it to use the asset host, and I don't want to hardcode it. Solution 2 does not work since that would affect all asset paths. I think what I should be doing is to combine using the img tag, but use rails to compute the asset host for me.
So in the end it would look something like this
<img src=\"#{#template.image_path("image.jpg}}\"/>
thanks for the idea!