1

私はすでに多くの異なるアプローチを試しましたが、どれも機能しません。ここで何か不足していますか?

これは私が試したことです...

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ベンダー/アセット/イメージから画像を提供するレール3.2およびレール3.1を使用してCSSで背景画像を表示する場合そしてRails 3.1とImage Assetsとstackoverflowからの他のページ。

しかし、私の画像は表示されません。それらはapp/assets/imagesディレクトリにあります。私はダブルチェックとトリプルチェックを行いました。はい、それらはその場所にあります。Google Chrome の Inspect Element に移動し、画像のリンクをクリックすると、壊れたリンクの画像が表示されます。

4

2 に答える 2

1

asset-urlいくつかのことを想定して、最後の使用例は機能するはずです...

  • アセット パイプラインが実際に有効になっている ( をconfig/application.rb探すconfig.assets.enabled = true)
  • Gemfilesass-railsにある

  • sass-railsが Gemfile のグループ (グループなど) の一部である場合、Gem の:assetsグループが開発環境で Bundler によってロードされていることを確認する必要があります。あなたconfig/application.rbは次のように見えるはずです：

    定義されている場合?(バンドラー)
  # これにより、開発環境とテスト環境に :assets グループがロードされます
  Bundler.require *Rails.groups(:assets => %w(開発テスト))
終わり

  • asset-urlこの特定のスタイルシートは SASS スタイルシートです (つまり、gemのヘルパーであるため、拡張子 .SASS または .SCSS が必要ですsass-rails) 。

  • このスタイルシートは、実際にはアセット パイプラインに読み込まれます (名前を付けるapplication.css.scssか、required/@include by にする必要がありますapplication.css.scss) 。

これがすべて真実である場合、まだ問題がある場合は、何かばかげたことが起こっていると言えます。

于 2012-07-09T18:10:55.213 に答える
0

あなたの最初のものはうまく見えて、私のために働きます。したがって、確認すべき点がいくつかあります。

  • CSSファイルと同じディレクトリにup_arrow.gifをイメージしていますか？（または、CSSがHTMLページにある場合は、htmlファイルと同じディレクトリ）
  • FirefoxのFirebugやSafariのFirebugなどのブラウザでデバッグツールを使用して右クリックし、[要素の検査]を選択します（Safari設定で最初に開発者メニューをオンにします）。計算された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>
于 2012-07-09T17:24:57.600 に答える