Currently, I am using ruby on rails 4.
In the html part, I am trying to load an image:
<img width="121" height="31" src="/assets/images/flatty/logo_lg.svg" />
The image file: logo_lg.svg is in the location: app/assets/images/flatty/
I tried:
<%= image_tag "/assets/images/flatty/logo_lg.png" %>
And in production.rb file: config.serve_static_assets = true.
Moreover, tried: rails assets:precompile
But the system still cannot find the image file.
You have a .svg but you are trying to load a .png . Change your code to this:
<%= image_tag "flatty/logo_lg.svg" %>
Don't use your full directory when you load images. The asset pipeline does that for you. Just put them in the right place i.e the images directory and write down:
<%= image_tag "someimg.png" %>
Additionally, if you want to style your image, you can give it a class or an id ( id would fit more for a logo):
<%= image_tag "flatty/logo_lg.svg" , :id => 'someId' , :class => 'someClass' %>
And then just put the CSS in your application css file or the one generated by the controller of you page:
.someClass {
width: 50px;
height: 50px;
}
#someId {
width: 50px;
height: 50px;
}
If you want to put an SVG though, they react differently. You have to remove the attributes given in the SVG's code (you can open up an .svg file with most of the text editors). It's XML markup.
Read this answer for more info.
Related
Currently I do this for my website
image_tag("logo.png")
This results
<img src="/assets/logo-c9dc9867ad75fdidmjdoehdo53di.png" alt="Logo" />
This works just fine for me. But sometimes I just need the source part of the image i.e I just need this part /assets/logo-c9dc9867ad75fdidmjdoehdo53di.png. How can I get it?
If your images are in app/assets/images, then use asset_path
<%= asset_path("logo.png") %>
# => "/assets/logo-c9dc9867ad75fdidmjdoehdo53di.png"
If your images are in public/assets, then use image_path
<%= image_path("logo.png") %>
# => "/assets/logo-c9dc9867ad75fdidmjdoehdo53di.png"
I can load a pdf in cloudinary but i can't display it. I tried with :
<%= cl_image_tag worker.cv.path, width: 1000, height: 1000,crop: :fill, format: :jpg %>
Renders in
<img width="1000" height="1000" src="http://res.cloudinary.com/dgl9juzps/image/upload/c_fill,h_1000,w_1000/v1498033370/owpbctm8yi8pbwsxt3wz.pdf.jpg%22" alt="Owpbctm8yi8pbwsxt3wz.pdf">
but it doesn't work.
Thanks for help
The rendered link has two problems:
<img width="1000" height="1000" src="http://res.cloudinary.com/dgl9juzps/image/upload/c_fill,h_1000,w_1000/v1498033370/owpbctm8yi8pbwsxt3wz.pdf.jpg%22" alt="Owpbctm8yi8pbwsxt3wz.pdf">
// src = "http://res.cloudinary.com/.../owpbctm8yi8pbwsxt3wz.pdf.jpg%22"
The trailing " from the %22
and the file extension is .pdf.jpg instead of just .jpg
The link works if you just call:
http://res.cloudinary.com/dgl9juzps/image/upload/c_fill,h_1000,w_1000/v1498033370/owpbctm8yi8pbwsxt3wz.jpg
So maybe you should only pass the filename without extension to the helper.
I have installed a custom theme in Camaleon Cms and put the images in the following folder:
app/apps/themes/<theme name>/assets/images/
When I try to load the image by using the following path:
<%= image_tag("logo.png", :alt => "logo", :width => "", :height => "") %>
then it looks for the image inside main asstes folder of the project i.e.:
app/assets/images/
but I want to look it inside the assets folder of the theme I installed.
Anybody knows how to do this?
add image load path in the tag to load image from your selected theme folder
<%= image_tag theme_asset_path("images/logo.png"), :title=> "logo" %>
We have a view under an engine that is supposed to show an image. this image (Button-Blank-Red-icon.png) is saved under the engine's path of "app/assets/images/engine_name/Button-Blank-Red-icon.png
I am getting the below error when trying to display this view.
ActionController::RoutingError (No route matches [GET] "/images/<>engine_name>/Button-Blank-Red-icon.png"):
What's the right way to display an image stored under engine's app/assets/images/engine_name/?
Here is the view code:
<img src="<%= RED_GREEN_YELLOW_CLS[r.step_qties.last.ontime_indicator] %>" height="15" width="15" />
r.step_qties.last.ontime_indicator returns one of 'green', 'red' and 'yellow'
The definition of constant RED_GREEN_YELLOW_CLS is in my_constant.rb under engine's config/initializers/:
RED_GREEN_YELLOW_CLS = {
'green' => '/Button-Blank-Green-icon.png',
'red' => '/Button-Blank-Red-icon.png',
'yellow' => '/Button-Blank-Yellow-icon.png'
}
One working solution with image tag (refers to episode#277 in railscasts.com):
<%=image_tag(RED_GREEN_YELLOW_CLS[r.step_qties.last.ontime_indicator], size: '23x23') %>
There is no need of block .
The my_constant.rb is:
RED_GREEN_YELLOW_CLS = {
'green' => 'engine_name/Button-Blank-Green-icon.png',
'red' => 'engine_name/Button-Blank-Red-icon.png',
'yellow' => 'engine_name/Button-Blank-Yellow-icon.png'
}
It looks like you're displaying your image via an AssetUrlHelpers. Your view code needs to be changed to the following:
<img src="<%= image_path(RED_GREEN_YELLOW_CLS[r.step_qties.last.ontime_indicator]) %>"
height="15" width="15" />
image_path is going to properly add the assets portion of the path, along with the hash generated by the asset pipeline, so that you get a correct url.
The correct url should be "/assets/<>engine_name>/Button-Blank-Red-icon.png" because when rails compiles the assets it will just mix all the content of /images /stylesheets and /javascript for all the gems and your app/assets dir inside public/assets. It will just copy "<>engine_name>" folder and it's content there.
It's not clear where this: "/images/<>engine_name>/Button-Blank-Red-icon.png" comes from, I'm not sure how to get that from the code you show.
Try to change what you use to "/assets/<>engine_name>/..." and it should work.
You can try to compile your assets manually and look where the files go, just do "bundle exec rake assets:compile RAILS_ENV=production", you can safely delete /public/assets after that test to keep it clean.
Have you tried asset_path helper?
<%= image_tag(asset_path("engine_name/#{RED_GREEN_YELLOW_CLS[r.step_qties.last.ontime_indicator]}"), size: '23x23') %>
replace engine_name with the actual name of the engine app.
Images from engine are accessible via:
http://localhost:3000/assets/engine_name/image.png
So as you said
<img src="<%= asset_path(RED_GREEN_YELLOW_CLS[r.step_qties.last.ontime_indicator]) %>" height="15" width="15" />
RED_GREEN_YELLOW_CLS = {
'green' => 'engine_name/Button-Blank-Green-icon.png',
'red' => 'engine_name/Button-Blank-Red-icon.png',
'yellow' => 'engine_name/Button-Blank-Yellow-icon.png'
}
Will work.
p.s. I find r.step_qties.last.ontime_indicator personally insulting train wreck. :)
I'm using the wicked_pdf plugin with a rails 3.2 project and the asset pipeline. I want to define my picture inside pdf.css.erb
Here is my controller code to make use of a layout file:
respond_to do |format|
format.html
format.pdf do
render :pdf => "Cars.pdf",
:template => "reports/cars.html.haml",
:page_size => "A4",
:layout => "pdf.html",
:handlers => [:haml]
end
end
Here is my layout file where I include my pdf.css.erb file.
!!!
%html
%head
= wicked_pdf_stylesheet_link_tag "pdf"
= csrf_meta_tag
%body
.contentbg
.logo
.content= yield
Lastly here is my CSS
.logo {
background: wicked_pdf_image_tag "logo.jpg";
width: 100px;
height: 80px;
}
This does not find the logo.jpg. If I put the wicked_pdf_image_tag "logo.jpg" line directly in my pdf.html.haml template layout file then it does render my logo in the pdf generated.
Is it possible to use the wicked_pdf_image_tag helper inside a css.erb file?
That's not going to work inside a css.erb file, firstly because it is missing erb tags, but mostly because wicked_pdf_image_tag will expand that out to this:
.logo {
background: <img src="file://foo/bar/public/images/logo.jpg">;
}
Which is not valid css.
Best bet would be to construct it by hand and something like this:
.logo {
background: url(<%= Rails.root.join('assets','images','logo.jpg').to_s %>);
}
The reason to have the direct file access path is so wkhtmltopdf doesn't have to make a web request to get the assets, hence load more quickly.