I'm new to RoR and in my Rails 3.2.3 app without the sprockets gem installed, I've used "image_tag" to display "example.png" which exists in "public/images," like so:
<%= image_tag "example.png" %>
It works, yet, so far all attempts to display any other image in the same directory fail. For example,
<%= image_tag "embassy.png" %>
...fails, even though the file exists. It's like the app will only display "example.png" and no other image in the same directory. The permissions are the same on all files. The assets pipeline is enabled per,
config.assets.enabled = true
...in "config/application.rb." I've grokked a few resources from the API to random articles and nothing has helped me understand this odd behavior. Can anybody explain either,
1) Why and when Rail behaves like this?
and/or
2) How to fix it?
Try using the app/assets directory for storing images, they will be copied into public/assets when needed. The images can be loaded from there.
See also the asset pipeline for more information.
Related
I'm new to devops and can't figure out what's going on. Today we pushed a branch to production where we are using new images for a view.
Everything worked fine in development environment, but when it was promoted to production we started getting errors related to the new images not being found in the asset pipeline
<div class="text-center my-10">
<%= link_to t("url.static_site") do %>
<%= image_tag "logo-white-no-background" %>
<% end %>
</div>
error:
The asset "logo-white-no-background" is not present in the asset pipeline.
I've tried running bundle exec rake assets:precompile locally to emulate what happens in production (as I understand everything under /assets is precompiled and served by the web server) and I don't get any errors.
The only thing that I find different in the docs is that I'm not passing the file extension in the image_tag, although like I said it is working find in development (and actually breaks if I add the extension in that environment).
Should I try forcing a pre-compile on production to see if it is loaded correctly?
What else can I try?
You will need to add the extension to make it work in production!
It shouldn't break it in development, make sure you run rails assets:clean and rails assets:clobber to clean out the compiled assets and that you have the right file extension!
The extension is a hint to not only browsers or but also some backend servers. Nobody forces developers to add the extension; however, you can see adding the extension as a good coding habit.
For example, your image is jpg, but the browser shows it as png. You found the image shown correctly maybe it's just happened to that browser guessed the file type correctly. In some scenarios like downloading the file from S3, if there is no extension provided, it will be served as a pdf file.
Btw, about your problem, because it didn't show the image in the production environment. You can first check the src from by inspecting the source code. If the browser cannot find the image file via that URL, the URL is just invalid. After inspecting the image's URL, you can try to generate the right URL then.
I'm working on the depot_a app from Agile Web Development with Rails 4. Following the steps in Task A, all images are in app/assets/images/:
[~/projects/try_ruby/depot]$ ls app/assets/images/
cs.jpg logo.png rails.png rtp.jpg ruby.jpg
In app/views/products/index.html.erb, the code to present the image:
<%= image_tag(product.image_url, class: 'list_image') %>
Instead of accessing asset/cs.jpg, it actually generates the obfusticated image path (see the screenshot): /assets/cs-436e7e2d621d24ea1d19769362306ecdec83fcd62d5d45f135adca63e6a0f9c5.jpg.
Why is that?
The jpg contains error:
EDIT:
My rails version is 4.2. But the book's depot app is based on Rails 4.0. So I downgraded Rails to 4.0 and re-did the steps again (regenerated scaffold, db seeding, etc.), then the jpg photos are shown correctly. It seems like a version thing. But I still don't know why jpg doesn't load in Rails 4.2.
The obfusticated image path /assets/cs-436e7e2d621d24ea1d19769362306ecdec83fcd62d5d45f135adca63e6a0f9c5.jpg. could be from the public/assets directory and not app/assets directory. The possible reason is that you precompiled your assets.
I am using Ruby on Rails 4.1.1 and I want to add a linked image - my app's logo - in email messages but I had a doubt since my previous question.
By using files located in the public directory it seems that to link to an image in your Asset Pipeline you can use
link_to(LINK_TEXT_OR_IMAGE_TAG_HELPER, image_path(IMAGE_NAME))
but for those located in the app/assets it seems do not work the same, at least in rendered email messages in production mode. All assets that are compiled in Production have a fingerprint ID... is the fingerprint causing the load of static assets to do not render images in email messages?
I doubt since I would like to access images from both browser and email. I tried to solve the issue by moving the image from app/assets/images/logo.png to public/images/logo.png and by changing statements in my application.css.scss file from image-url("logo.png") to url("/images/logos.png"). However I do not know if I am following "the Rails way" or a "best practice". Do I? Should I add to the public directory all assets that I plan to use outside my application and in the app/assets directory all assets that I plan to use internally to my application?
For emails, it almostisn't any different compared to standard Rails views.
You can link to an image in your mailer using the image_tag helper you'd normally use in regular views as well:
<%= image_tag('some_image.jpg') %>
You also need to tell Action Mailer where it can find the assets, because it will use absolute URLs to refer to your images:
config.action_mailer.asset_host = 'http://www.example.com/'
I'm using Rails 3 with assets pipeline enabled.
And I know images such as icons or logos should go in app/assets/images.
But where should I put images that may be a lot and big? For example images uploaded by the users, such as photos
I don't want them to be duplicated by precompile (not sure if it does that, I don't know how it works). And I want them to be ready to use as soon as they get uploaded.
Any ideas?
The image_tag wasn't working as expected. In the documentation it says 'By default, files are loaded from public/images', but that wasn't working.
The solution was to add /images to the path (with leading backslash, or it won't work)
<%= image_tag '/images/some_dir/some_image.jpeg' %>
Amazon S3 is a great, inexpensive way to store images that your users upload. I recommend using the Paperclip gem which integrates with s3. There's a section in the paperclip documentation with instructions on how to use s3. No clue what precompiling images means or how it applies to uploaded image files, but they will be available as soon the upload is complete. Using this also has some additional benefits such as acting as a backup system.
I have put all my images for my admin theme in the assets folder within a folder called admin. Then I link to it like normal ie.
# Ruby
image_tag "admin/file.jpg" .....
#CSS
.logo{ background:url('/assets/images/admin/logo.png');
FYI. Just for testing I am not using the asset_path tag just yet as I have not compiled my assets.
Ok all good so far until I decided to update an image. I replaced some colors but on reload the new styled image is not showing. If I view the image directly in the browser its still showing the old image. Going one step further I destroyed the admin images folder. But it has broken nothing all the images are still being displayed. And yes I have cleared my cache and have tried on multiple browsers.
Is there some sort of image caching going on? This is just local development using pow to serve the pages.
Even destroying the whole images folder the images are still being served.
Am I missing something?
In 3.1 you just get rid of the 'images' part of the path. So an image that lives in /assets/images/example.png will actually be accessible in a get request at this url - /assets/example.png
Because the assets/images folder gets generated along with a new 3.1 app, this is the convention that they probably want you to follow. I think that's where image_tag will look for it, but I haven't tested that yet.
Also, during the RailsConf keynote, I remember D2h saying the the public folder should not have much in it anymore, mostly just error pages and a favicon.
You'll want to change the extension of your css file from .css.scss to .css.scss.erb and do:
background-image:url(<%=asset_path "admin/logo.png"%>);
You may need to do a "hard refresh" to see changes. CMD+SHIFT+R on OSX browsers.
In production, make sure
rm -rf public/assets
bundle exec rake assets:precompile RAILS_ENV=production
happens upon deployment.
For what it's worth, when I did this I found that no folder should be include in the path in the css file. For instance if I have app/assets/images/example.png, and I put this in my css file...
div.example { background: url('example.png'); }
... then somehow it magically works. I figured this out by running the rake assets:precompile task, which just sucks everything out of all your load paths and dumps it in a junk drawer folder: public/assets. That's ironic, IMO...
In any case this means you don't need to put any folder paths, everything in your assets folders will all end up living in one huge directory. How this system resolves file name conflicts is unclear, you may need to be careful about that.
Kind of frustrating there aren't better docs out there for this big of a change.
In rails 4 you can now use a css and sass helper image-url:
div.logo {background-image: image-url("logo.png");}
If your background images aren't showing up consider looking at how you're referencing them in your stylesheets.
when referencing images in CSS or in an IMG tag, use image-name.jpg
while the image is really located under ./assets/images/image-name.jpg
http://railscasts.com/episodes/279-understanding-the-asset-pipeline
This railscast (Rails Tutorial video on asset pipeline) helps a lot to explain the paths in assets pipeline as well. I found it pretty useful, and actually watched it a few times.
The solution I chose is #Lee McAlilly's above, but this railscast helped me to understand why it works. Hope it helps!
The asset pipeline in rails offers a method for this exact thing.
You simply add image_path('image filename') to your css or scss file and rails takes care of everything. For example:
.logo{ background:url(image_path('admin/logo.png'));
(note that it works just like in a .erb view, and you don't use "/assets" or "/assets/images" in the path)
Rails also offers other helper methods, and there's another answer here: How do I use reference images in Sass when using Rails 3.1?