3

Rails アプリで Bootstrap を使用して Glyphicon を表示しようとしていますが、表示する方法がわかりません。ここで、パスを修正することでこの問題を解決しようとするいくつかの質問を読みました。ただし、これらの質問/回答を確認しても、グリフィコンが表示されないため、まだ立ち往生しています。

画像とスタイルシートはどちらも同じ「Assets」ディレクトリにあります。私が使用している HTML は、ブートストラップ スタイルシートにリンクしている適切なクラスを見つけている Chrome の要素を調べると、うまく動作しているようです。

HTML:

<p><%= link_to raw('<i class="icon-share-alt"></i>'), post %></p>

CSS (Bootstrap のデフォルトは、/img を /images b/c に更新したことを除いて、これが私の images ディレクトリの名前です):

[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
margin-top: 1px;
*margin-right: .3em;
line-height: 14px;
vertical-align: text-top;
background-image: url("../images/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;
}

役立つかもしれないもう1つのコメント。Chrome で要素を検査し、要素検査セクションの右側のレールにある「../images/glyphics...」にカーソルを合わせると、Chrome は localhost:3000/assets/../images/glyphicons-halflings.png を次のように引用します。アプリケーションのルートからの正しいパスではありません。これは Chrome の略記に過ぎないと思いますが、これが私の問題の根本でない限り、彼らが正しいパスを引用しないのは奇妙に思えます。とは言え、まだ直し方がわからない。

4

5 に答える 5

6

Rails の Asset Pipeline 機能の一部である「assets」フォルダーについて言及しているため、Rails バージョン 3.1 以降を使用していると思います。簡単に言うと、Rails プロジェクトのベースにある "app/assets" フォルダーに入れるものはすべてassets、サーバー上のフォルダーに自動的にルーティングされます。例えば：

  • your_app/app/assets/stylesheets/style.css>>>localhost:3000/assets/style.css
  • your_app/app/assets/images/button.png>>>localhost:3000/assets/button.png
  • your_app/app/assets/javascripts/script.js>>>localhost:3000/assets/script.js

つまり、Rails を使用すると、ソース フォルダー内のファイルを整理できますが、フォルダー内のエンド ユーザー向けにそれらをすべて 1 つにまとめることができassetsます。アセット パイプラインの詳細については、「Ruby on Rails ガイド: アセット パイプライン」を参照してください。

あなたの問題は、CSS がレールについて何も知らないことです。そのコードがブラウザーで解釈されると、それ自体がassetsフォルダー内に表示されます。これは、あなたが持っている他の画像や JavaScript にも当てはまります。最も簡単な解決策は、に変更url("../images/glyphicons-halflings.png");することurl("/assets/glyphicons-halflings.png");です。assetsこれが機能するのは、ブラウザーで表示したときにCSS ファイルと画像の両方がフォルダー内で相互に認識されるためです。

2 つ目の解決策は、sass-rails gem を使用することです。デフォルトの方法を使用してアプリを生成した場合は、Gemfile で見つかる可能性があります。その場合は、CSS ファイルの名前を からsomething.cssに変更できますsomething.css.scss(または.css.sass、前者の方が好みです)。これにより、 SASSに対する Rails の組み込みサポート、具体的には以下を使用できるようになります。

background: image-url("glyphicons-halflings.png");
### Outputs: background: url(/assets/glyphicons-halflings.png);

このimage-urlコマンドを Rails アプリの .css.scss ファイルで使用すると、画像の検索と適切なフォルダーの出力が処理されます。

3 つ目のオプションは、Rails 3.1 以降のアセット パイプラインと互換性のあるtwitter-bootstrap-rails gem を使用することです。

于 2013-06-15T22:30:54.770 に答える
1

TL;DR:代わりにbootstrap-sass gem を使用します (以下の残りの回答では、bootstrap-rails gem を提案していますが、これはあまり便利ではありません。これは、LESS などの他の依存関係が必要になり、少し複雑になるためです。

まず、Bootstrap をアプリに追加する方法は複数あることをお伝えしておきます。私は最初に手動の方法を試しました（これはあなたがしていることだと思います）が、実際にあなたと同じ問題に陥りました（同じ原因かどうかはわかりません）。そこで、 twitter-bootstrap-railsという gem を使用する、推奨される方法を試しました。私はこのレールキャストに従いました：

http://railscasts.com/episodes/328-twitter-bootstrap-basics

しかし、別の宝石'less'がないという問題に遭遇しました。これは厄介な実行時エラーを引き起こしていました。そこで、Gemfile にさらに 2 つの gem を追加し、合計 3 つになりました。 ）。

それらの正確な役割はまだわかりませんが、Rails アセット パイプラインで重要な役割を果たしています。「less」は、明らかに、Rails に付属する「sass」の代わりに、Bootstrap が依存しているものです。

したがって、それらをインストールした後、それらとbundle installその他の依存関係、最も注目すべきlibv8-を含め、Bootstrapが完全に機能するようになりました<i class="icon-share-alt"></i>=）

于 2013-06-15T20:50:55.070 に答える
1

本番モードでアイコンが表示されない理由を知りたい場合は、代わりに css プロパティの background-image を background に置き換えてみてください。

background: url(<%= asset_path 'glyphicons-halflings.png' %>);

... オプションで、asset_path ヘルパーが機能するように、boostrap.css ファイルの末尾に .erb 拡張子を追加します。これは、ブートストラップ gem を一切使用していません。

これについては、別の SO の質問hereを参照してください。

于 2013-09-09T19:57:11.930 に答える
0

このリンクは非常に役立つことがわかりました。

于 2014-05-13T19:13:42.680 に答える
0

この回答をご覧ください。新しいバージョンへのアップグレードが困難になる css ファイルを変更するよりも優れています。したがって、アイデアは簡単です。このファイルへのルートを作成するか、パラメーターインタープリターを使用して一般的なファイルを作成します。他の簡単な解決策は、この画像を「public/img」に入れることです。

于 2014-09-21T23:05:32.480 に答える