加载rails图像的标准答案

【问题标题】：standard for loading rails image加载rails图像的标准
【发布时间】：2014-02-05 06:14:52
【问题描述】：

最佳做法是在 Rails 应用中加载图像，例如徽标图像。

我应该通过rails图像标签加载它吗？例如 -

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

或通过 css 定位空 div，例如 -

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

在这种情况下，我会选择 rails 图像标签，因为它只需要一行代码，而后者需要更多行代码和一个空的 div。

【问题讨论】：

【解决方案1】：

image_tag 是 rails 默认的帮助方法，用于在应用程序中加载图像。它在标签内带有各种选项，语法如下；

 image_tag(source, options = {}) public

选项

您可以使用选项添加 HTML 属性。为了方便和一致性，这些选项支持三个额外的键：

:alt - 如果没有给出替代文本，则源文件名部分为已使用（大写且没有扩展名）
:size - 提供为“{Width}x{Height}”，因此“30x45”变为 width=“30” 和高度=“45”。 :size 如果值不在格式正确。
:mouseover - 设置鼠标悬停时使用的备用图像触发事件，并设置要替换的原始图像 onmouseout。这可用于实现简单的图像切换在鼠标悬停时触发。

这些是默认情况下附带的选项，无需担心编写和额外的 css，正如您使用 css 示例所询问和解释的那样；

image_tag(source, options = {}) public

返回源的 html 图像标记。源可以是完整路径，也可以是公共图像目录中存在的文件

示例

第一个

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

HTML 输出

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

第二次

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

HTML 输出

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

希望这会有所帮助！ :-)

【讨论】：

【解决方案2】：

暂时忘掉 Rails，想想你希望你的标记是什么样子。其实这不是 Rails 相关的问题：https://stackoverflow.com/a/492834/1242778

如果您决定使用<img> 标记来执行此操作，您可以使用image_tag 助手。否则，您的替代方案完全可以。

【讨论】：