Question

我已经尝试了很多不同的方法而且都没有用，我在这里错过了一些东西吗？

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

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中的Inspect Element，当我点击图片链接时，它会显示我断开的链接图片。

Answer 1

使用asset-url的最后一个示例应该有用，假设有一些事情......

实际启用了资产管道（config/application.rb寻找config.assets.enabled = true）
您的Gemfile中有sass-rails
如果sass-rails是Gemfile中组的一部分（例如，:assets组），则必须确保开发环境中Bundler正在加载宝石组。在您的config/application.rb中，您应该会看到以下内容：
```
if defined?(Bundler)
  # This loads your :assets group in the development and test environments
  Bundler.require *Rails.groups(:assets => %w(development test))
end
```
这个特殊的样式表是一个SASS样式表（即，应该有扩展名.SASS或.SCSS，因为asset-url是来自sass-rails gem的帮助者）
此样式表实际上已加载到资产管道中（application.css.scss应该命名为application.css.scss或{{1}}必须包含@）

如果在所有这一切都是真的之后你还有问题，那么我会说傻话正在发生。

Answer 2

你的第一个看起来很好，适合我。所以要检查一些事情：

您是否将图像up_arrow.gif与CSS文件放在同一目录中？（或者，如果您的CSS位于HTML页面中，那么与html文件位于同一目录中）
在浏览器中使用调试工具，例如Firefox或Safari中的Firebug，右键单击并选择“Inspect Element”（在Safari prefs中首先打开开发人员菜单）。确保计算出的CSS属性符合您的预期，然后查看资源/网络选项卡，看看浏览器是否正在尝试从正确的位置加载您的图像。
图像是否用作bg图像但由于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>

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

2 个答案: