0

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.

J.L
  • 592
  • 5
  • 17
  • 35

1 Answers1

4

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.

Community
  • 1
  • 1
Hristo Georgiev
  • 2,499
  • 1
  • 16
  • 23
  • That's cool, many thanks. btw, do you know how to set the image size in the <%= image_tag "flatty/logo_lg.svg" %> – J.L Jun 01 '14 at 12:12
  • No problem. I just edited my answer again (regarding giving classes and ids) because I missed some commas. Have fun! Rails is really cool once you learn it! – Hristo Georgiev Jun 01 '14 at 12:20
  • hi, one more problem, tried :id => 'someId' , :class => 'someClass', I see the html load the id name, but cannot change the size of the image. I added the css to the corresponding css.sass file – J.L Jun 01 '14 at 12:26
  • Oh, I was using a generic example. I will update my question again! – Hristo Georgiev Jun 01 '14 at 12:29
  • I updated my answer. If the HTML id is there, then it is properly referenced. I forgot that SVGs are a little bit queer and they need to be altered in a certain manner before you put them into a webpage. – Hristo Georgiev Jun 01 '14 at 12:34