-1

What is the best practise is for loading images in a rails app, for small things such as logo image.

should I load it through the rails image tag such as - 

 <%= image_tag('logo.png', :size => '100x17') %>

or through css targeting an empty div such as - 

 #logo{
    background: image-url('logo.png');
    width: 100px;
    height: 17px;
    margin-top: 15px;
 }

In this circumstance I would go for the rails image tag as it only requires one line of code where the latter requires more lines of code and an empty div.

Samuel
  • 5,529
  • 5
  • 25
  • 39
  • Atleast accept/upvote/downvote any of the answers or delete your question if you are not satisfied by the answers available. – Sam Oct 07 '15 at 07:17

2 Answers2

0

Forget about Rails for a second and think how you want your markup to look like. Actually this is not a Rails-related question: https://stackoverflow.com/a/492834/1242778

If you decide you want to do it with an <img> tag you can use the image_tag helper. Otherwise, your alternative is totally fine.

Community
  • 1
  • 1
Agis
  • 32,639
  • 3
  • 73
  • 81
0

The image_tag is rails default helper method for loading the images in your application. It comes with various options inside the tags and the syntax is as follows;

 image_tag(source, options = {}) public

Options

You can add HTML attributes using the options. The options supports three additional keys for convenience and conformance:

  • :alt - If no alt text is given, the file name part of the source is used (capitalized and without the extension)

  • :size - Supplied as “{Width}x{Height}”, so “30x45” becomes width=“30” and height=“45”. :size will be ignored if the value is not in the correct format.

  • :mouseover - Set an alternate image to be used when the onmouseover event is fired, and sets the original image to be replaced onmouseout. This can be used to implement an easy image toggle that fires on onmouseover.

These are the options which comes with it by default and no worries to write and extra css as you have asked and explained using css example as;

image_tag(source, options = {}) public

Returns an html image tag for the source. The source can be a full path or a file that exists in your public images directory

Examples

1st

image_tag("icon.png", :size => "16x10", :alt => "Edit Entry")

HTML Output

<img src="/images/icon.png" width="16" height="10" alt="Edit Entry" />

2nd

image_tag("mouse.png", :mouseover => image_path("mouse_over.png"))

HTML Output

<img src="/images/mouse.png" onmouseover="this.src='/images/mouse_over.png'" onmouseout="this.src='/images/mouse.png'" alt="Mouse" />

Hope this helps! :-)

Sam
  • 1,623
  • 1
  • 19
  • 31
  • for more you can refer http://apidock.com/rails/ActionView/Helpers/AssetTagHelper/image_tag – Sam Jan 16 '14 at 11:54