стандарт для загрузки рельсов image

Question

Какова наилучшая практика для загрузки изображений в приложении rails для небольших вещей, таких как изображение логотипа.

я должен загрузить его с помощью тега Рельсы изображения, такие как -

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

или через CSS ориентации пустой DIV, таких как -

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

В таком случае я бы пойти на рельсах изображения тег, поскольку для этого требуется только одна строка кода, где последний требует больше строк кода и пустой div.

Answer 1

Забудьте о Rails на секунду и подумайте , как вы хотите, чтобы ваша разметка выглядела как. На самом деле это не вопрос, связанный с Rails: https://stackoverflow.com/a/492834/1242778

Если вы решите, что хотите сделать это с помощью тега <img>, вы можете использовать вспомогательный помощник image_tag. В противном случае ваша альтернатива полностью прекрасна.

Answer 2

image_tag является вспомогательным методом по умолчанию для rails для загрузки изображений в приложение. Он поставляется с различными опциями внутри тегов, и синтаксис выглядит следующим образом;

image_tag(source, options = {}) public 

Опции

Вы можете добавить HTML атрибуты с помощью параметров. Параметры поддерживают три дополнительные клавиши для удобства и соответствия:

• :alt - Если текст альта не задан, то имя файла часть источника используется (капитализируются и без расширения)

• :size - Поставляется как «{Width} x {Height}», поэтому «30x45» становится width = «30» и height = «45». : размер будет проигнорирован, если значение не соответствует правильному формату .

• :mouseover - Установка альтернативного изображения, которое будет использоваться, когда событие OnMouseOver обжигает, и устанавливает исходное изображение, которое будет заменен onmouseout. Это можно использовать для реализации легкого переключения изображения , который запускается onmouseover.

Это те варианты, которые вместе с ним по умолчанию и не стоит беспокоиться и писать дополнительные CSS, как вы просили, и объяснить, используя пример CSS, как;

image_tag(source, options = {}) public 

Возвращает тег изображения html для источника.Источником может быть полный путь или файл, который существует в вашей директории открытых изображений

Примеры

1-й

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

HTML Output

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

второй

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" />

Надеется, что это помогает! :-)