web-dev-qa-db-ja.com

Rails 4 SCSSファイルでimage-path、image-url、およびasset-urlが機能しなくなりました

image-urlとRails 4の他の何かを別に使用することになっていますか？意味をなさないように見える異なる値を返します。 logo.pngに/app/assets/images/logo.pngがあり、次を実行すると、これが得られます：

image-url("logo.png") -> url("/images/logo.png") #obviously doesn't work
image-path("logo.png") -> "/images/logo.png"
asset-url("logo.png") -> url("/logo.png")

もちろん、少なくとも/assetsが前に必要なので、これらは機能しません。

UPDATE：実際、気づいたのですが、Rails 4の画像にアクセスするにはどうすればよいですか？ /app/assets/images/logo.pngに画像があります。ただし、次のいずれかのURLにアクセスしても、画像が表示されません。

http://localhost:3000/assets/logo.png
http://localhost:3000/assets/images/logo.png
http://localhost:3000/logo.png
http://localhost:3000/images/logo.png

PDATE 2：logo.pngを起動する唯一の方法は、/app/assets/stylesheetsディレクトリに移動してからプルアップすることです：

http://localhost:3000/assets/logo.png
ruby-on-railsasset-pipelineruby-on-rails-4
92
at.

私は自分でこの問題を抱えていました。うまくいけば役立つ3つのポイント：

  • app/assets/imagesディレクトリに画像を配置すると、パスにプレフィックスを付けずに画像を直接呼び出すことができるはずです。すなわち。 image_url('logo.png')
  • アセットを使用する場所に応じて、方法によって異なります。 background-image:プロパティとして使用している場合、コード行はbackground-image: image-url('logo.png')である必要があります。これは、lessスタイルシートとsassスタイルシートの両方で機能します。ビューでインラインで使用している場合は、Railsの組み込みimage_tagヘルパーを使用して画像を出力する必要があります。繰り返しますが、接頭辞<%= image_tag 'logo.png' %>はありません
  • 最後に、アセットをプリコンパイルする場合は、rake assets:precompileを実行してアセットを生成するか、実稼働用にrake assets:precompile Rails_ENV=productionを実行します。そうしないと、ページをロードするときに実稼働環境にフィンガープリントされたアセットがありません。

また、ポイント3のこれらのコマンドについては、バンドラーを実行している場合は、bundle execをプレフィックスとして付ける必要があります。

104
cdaloisio

最初の定式、image_url('logo.png')は正しいです。イメージが見つかった場合、パス/assets/logo.png（および本番環境でのハッシュ）が生成されます。ただし、Railsが名前の付いた画像を見つけられない場合、/images/logo.pngにフォールバックします。

次の質問は、なぜRailsが画像を見つけられないのですか？ app/assets/images/logo.pngに配置すると、http://localhost:3000/assets/logo.pngにアクセスしてアクセスできるはずです。

それは機能するが、CSSが更新されない場合は、キャッシュをクリアする必要がある場合があります。プロジェクトディレクトリからtmp/cache/assetsを削除し、サーバー（webrickなど）を再起動します。

それが失敗した場合は、background-image: url(logo.png);を使用することもできます。これにより、CSSは同じ相対パス（この場合は/ assets）を持つファイルを検索します。

61
Nick Urban

asset_urlヘルパーを使用することでその問題を解決できることがわかりました。

asset_url("backgrounds/pattern.png", image)
8
Leftis

インラインcssで背景画像を追加しようとして、同様の問題がありました。アセットの同期が機能するため、画像フォルダを指定する必要はありません。

これは私のために働いた：

background-image: url('/assets/image.jpg');
7
ykwx

Rails 4.0.0は、cssファイルと同じディレクトリ構造でimage-urlで定義された画像に見えます。

たとえば、assets/stylesheets/main.css.scssのCSSの場合、image-url('logo.png')はurl(/assets/logo.png)になります。

Cssファイルをassets/stylesheets/cpanel/main.css.scssに移動すると、image-url('logo.png')は/assets/cpanel/logo.pngになります。

Asset/imagesディレクトリの下で画像を直接使用する場合は、asset-url('logo.png')を使用できます。

4
kuntoaji

スタイルシートの場合：url（asset_path（ 'image.jpg'））

3
user2586863