I'm working on the frontend part of a rails app. I had to add few images, so I added those images into app/assets/images directory.
I can access images that came with the app via /assets/[image name], but I can't access my new images. I tried
/assets/images/[image name]
/assets/[image name]
/[image name]
/images/[image name]
looks like there's a caching system behind, or I'm doing something incorrectly.
Please advise me.
Thanks,
Moon
You should always use the image_tag or asset_path helper to compute the path to a named asset—see Linking Assets from the Asset Pipeline guide.
You could also try a rake tmp:clear if you're using the default simple file-based rails cache to make sure nothing's being cached incorrectly.
Try:
<%= image_tag "yourfilename.png" %>
Related
I have an image in my rails source in rails_project/public/images/2019-12/image1.png
I want to show image by acessing URL like:
http://10.0.5.140:8888/applications/images/2019-12/image1.png
(10.0.5.140 is my IP and 8888 is my rails port)
I tried some solution but I always received the error:
Routing Error
No route matches [GET] "/applications/images/2019-12/image1.png"
Please give me some ideas to resolve my problem. Thanks!
Use asset helper method image_tag(). You should surely read official guide's Coding Links to Assets.
<%= image_tag('/images/2019-12/image1.png') %>
should work for you.
Rails use asset pipeline and serve files from asset load paths (default to app/assets, lib/assets, vendor/assets)
In development files under those load path are served by app server.
In production files under those load path are pre-compiled into /public/assets and served by web server such as nginx.
The image_tag method with
relative file path e.g. 'file.png' searches for /public/assets/file.png
absolute file path e.g. '/images/file.png' searches for /public/images/file.png
Since your image is in public folder. please try this
http://10.0.5.140:8888/images/2019-12/image1.png
To show static images of public folder you can also try this:
<img src="/images/2019-12/image1.png">
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.
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.
Are we supposed to use something else aside from image-url and others in Rails 4? They return different values that don't seem to make sense. If I have logo.png in /app/assets/images/logo.png and I do the following, this is what I get:
image-url("logo.png") -> url("/images/logo.png") #obviously doesn't work
image-path("logo.png") -> "/images/logo.png"
asset-url("logo.png") -> url("/logo.png")
Of course none of these work because they need at least /assets in front.
UPDATE: Actually, I just noticed, how do I access images in Rails 4? I have an image at /app/assets/images/logo.png. But if I go to any of the following URLs, I still don't see my image:
http://localhost:3000/assets/logo.png
http://localhost:3000/assets/images/logo.png
http://localhost:3000/logo.png
http://localhost:3000/images/logo.png
UPDATE 2: The only way I can bring up my logo.png is by moving it into the /app/assets/stylesheets directory and then pulling up:
http://localhost:3000/assets/logo.png
I just had this issue myself.
3 points that will hopefully help:
If you place images in your app/assets/images directory, then you should be able to call the image directly with no prefix in the path. ie. image_url('logo.png')
Depending on where you use the asset will depend on the method. If you are using it as a background-image: property, then your line of code should be background-image: image-url('logo.png'). This works for both less and sass stylesheets. If you are using it inline in the view, then you will need to use the built in image_tag helper in rails to output your image. Once again, no prefixing <%= image_tag 'logo.png' %>
Lastly, if you are precompiling your assets, run rake assets:precompile to generate your assets, or rake assets:precompile RAILS_ENV=production for production, otherwise, your production environment will not have the fingerprinted assets when loading the page.
Also for those commands in point 3 you will need to prefix them with bundle exec if you are running bundler.
Your first formulation, image_url('logo.png'), is correct. If the image is found, it will generate the path /assets/logo.png (plus a hash in production). However, if Rails cannot find the image that you named, it will fall back to /images/logo.png.
The next question is: why isn't Rails finding your image? If you put it in app/assets/images/logo.png, then you should be able to access it by going to http://localhost:3000/assets/logo.png.
If that works, but your CSS isn't updating, you may need to clear the cache. Delete tmp/cache/assets from your project directory and restart the server (webrick, etc.).
If that fails, you can also try just using background-image: url(logo.png); That will cause your CSS to look for files with the same relative path (which in this case is /assets).
I just found out, that by using asset_url helper you solve that problem.
asset_url("backgrounds/pattern.png", image)
I had a similar problem, trying to add a background image with inline css. No need to specify the images folder due to the way asset sync works.
This worked for me:
background-image: url('/assets/image.jpg');
Rails 4.0.0 will look image defined with image-url in same directory structure with your css file.
For example, if your css in assets/stylesheets/main.css.scss, image-url('logo.png') becomes url(/assets/logo.png).
If you move your css file to assets/stylesheets/cpanel/main.css.scss, image-url('logo.png') becomes /assets/cpanel/logo.png.
If you want to use image directly under assets/images directory, you can use asset-url('logo.png')
for stylesheets:
url(asset_path('image.jpg'))
In case anyone arrives looking for how to generate a relative path from the rails console
ActionView::Helpers::AssetTagHelper
image_path('my_image.png')
=> "/images/my_image.png"
Or the controller
include ActionView::Helpers::AssetTagHelper
image_path('my_image.png')
=> "/images/my_image.png"
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