1

I already tried many different approaches and none work, am I missing something here?

This is what I have tried...

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

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

and

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

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

and

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

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

and

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

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

and...

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

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

and many more.

I have renamed the file application.css, application.css.scss, application.css.erb, application.scc.scss.erb, index.css, index.css.scss, index.css.erb

I have read this... http://edgeguides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets and 404 when displaying background image in CSS with rails 3.2 and Rails 3.1 serving images from vendor/assets/images and Rails 3.1 and Image Assets and other pages from stackoverflow.

But my images don't appear. They are in the app/assets/images directory. I have double checked and triple checked and yes, they are in that location. I go to Inspect Element in Google Chrome and when I click in the images link, it shows me the broken link image.

4

2 回答 2

1

asset-url假设有一些事情，你的最后一个例子应该可以工作......

  • 资产管道实际上已启用（在config/application.rb查找中config.assets.enabled = true）
  • 你有sass-rails在你的 Gemfile

  • 如果sass-rails是 Gemfile 中某个组的一部分（例如，该:assets组），则必须确保 Bundler 在您的开发环境中加载该组 gem。在你的config/application.rb你应该看到这样的东西：

    如果定义了？（捆绑器）
  # 这会在开发和测试环境中加载您的 :assets 组
  Bundler.require *Rails.groups(:assets => %w(开发测试))
结尾

  • 这个特定的样式表是一个 SASS 样式表（即，应该具有扩展名 .SASS 或 .SCSS 因为asset-url是sass-railsgem 的助手）

  • 这个样式表实际上是在资产管道中加载的（它应该被命名application.css.scss或者是必需的/@included by application.css.scss）

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

于 2012-07-09T18:10:55.213 回答
0

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

  • 您的图像 up_arrow.gif 是否与 CSS 文件位于同一目录中？（或者，如果您的 CSS 在 HTML 页面中，则与 html 文件位于同一目录）
  • 在浏览器中使用调试工具，例如 Firefox 或 Safari 中的 Firebug，右键单击并选择“Inspect Element”（首先在 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>
于 2012-07-09T17:24:57.600 回答