导轨。无法从 CSS 文件中显示图像答案

【问题标题】：Rails. Can't get images to be displayed from a CSS file导轨。无法从 CSS 文件中显示图像
【发布时间】：2012-07-09 03:07:45
【问题描述】：

我已经尝试了许多不同的方法，但都没有奏效，我在这里遗漏了什么吗？

这是我尝试过的......

th a.asc {
  background-image: url(up_arrow.gif);
}

th a.desc {
  background-image: url(down_arrow.gif);
}

和

th a.asc {
  background-image: url("assets/up_arrow.gif");
}

th a.desc {
  background-image: url("assets/down_arrow.gif");
}

和

th a.asc {
  background-image: url(assets/up_arrow.gif);
}

th a.desc {
  background-image: url(assets/down_arrow.gif);
}

和

th a.asc {
  background-image: url(<%= asset_path "up_arrow.gif" %>);
}

th a.desc {
  background-image: url(<%= asset_path "down_arrow.gif" %>);
}

还有……

th a.asc {
  background-image: asset-url("up_arrow.gif", image);
}

th a.desc {
  background-image: asset-url("down_arrow.gif", image);
}

还有更多。

我已重命名文件 application.css、application.css.scss、application.css.erb、application.scc.scss.erb、index.css、index.css.scss、index.css.erb

我已阅读此...http://edgeguides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets 和 404 when displaying background image in CSS with rails 3.2 和 Rails 3.1 serving images from vendor/assets/images 和 Rails 3.1 and Image Assets 以及来自 stackoverflow 的其他页面。

但我的图像没有出现。它们位于app/assets/images 目录中。我已经双重检查和三重检查，是的，它们在那个位置。我转到 Google Chrome 中的检查元素，当我单击图像链接时，它会显示损坏的链接图像。

【问题讨论】：

你的css文件在哪个目录？
app/assets/stylesheets
这是在本地开发还是在生产中？
开发。我有另一个使用background: #f0f0f0 url('/assets/bg-body.gif') top left repeat-y; 的应用程序没有问题。
把 url 改成 '../images/down_arrow.gif' 试试

标签： css ruby-on-rails ruby sass

【解决方案1】：

假设有几件事，您使用asset-url 的最后一个示例应该可以工作...

资产管道实际上已启用（在config/application.rb 中查找config.assets.enabled = true）
您的 Gemfile 中有 sass-rails
如果sass-rails 是您的 Gemfile 中某个组的一部分（例如，:assets 组），您必须确保 Bundler 在您的开发环境中加载了该组 gem。在您的config/application.rb 中，您应该会看到如下内容：
```
如果定义了？（Bundler）
  # 这会在开发和测试环境中加载您的 :assets 组
  Bundler.require *Rails.groups(:assets => %w(开发测试))
结束
```
这个特定的样式表是一个 SASS 样式表（即，应该具有扩展名 .SASS 或 .SCSS，因为 asset-url 是来自 sass-rails gem 的助手）
这个样式表实际上是在资产管道中加载的（它应该被命名为application.css.scss或者是application.css.scss所必需的/@included）

如果这一切都是真的你仍然有问题，那么我会说发生了一些愚蠢的事情。

【讨论】：

在您的最后一点中，如何在不将其添加到 application.css.scss 的情况下使其工作？

【解决方案2】：

你的第一个看起来不错，适合我。所以有几件事要检查：

您的图像 up_arrow.gif 是否与 CSS 文件位于同一目录中？（或者，如果您的 CSS 在 HTML 页面中，则与 html 文件位于同一目录）
在浏览器中使用调试工具，例如 Firefox 或 Safari 中的 Firebug，右键单击并选择“检查元素”（首先在 Safari 首选项中打开开发人员菜单）。查看以确保计算出的 CSS 属性符合您的预期，然后查看资源/网络选项卡以了解浏览器是否正在尝试从正确的位置加载您的图像。
图像是否被用作背景图像，但由于 A 元素太小而无法显示？如果 A 元素中没有文本，它将是 0x0。如果它具有文本和/或大小属性，如果背景图像有一堆空白区域，它可能仍然太小。尝试将 A 标签变大，看看是否是这种情况。例如。在 CSS 中添加 width 和 height 属性，而且 display: block 属性似乎是必要的。

如果您希望图像成为按钮，您也可以在 A 标签内放置一个 IMG 标签。虽然您可以根据需要让 CSS 工作，但它可能会更容易一些。

这对我有用：

<html>
<head>
<style type='text/css'>
    th a.asc { 
        background-image: url(up_arrow.png); 
        width: 32px; height: 32px; display: block;
    }
</style>
</head>
<body>
<table><tr><th><a class='asc'></a></th></tr></table>
</body>
</html>

【讨论】：

啊，我应该已经阅读了你的问题的底部，所以绝对是关于加载图像而不是 0x0 A 元素。好的，也许edralph 的答案更好。