Rails 4 image-path、 image-url 和 asset-url 不再在 SCSS 文件中工作

除了 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在前面。

更新 : 实际上，我刚刚注意到，我如何在 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

更新2 : 打开我的 logo.png的唯一方法是将它移动到 /app/assets/stylesheets目录，然后打开:

http://localhost:3000/assets/logo.png
151128 次浏览
小开

I just found out, that by using asset_url helper you solve that problem.

asset_url("backgrounds/pattern.png", image)
小开

Your first formulation, image_url('logo.png'), is correct. If the image is found, it will generate the path /assets/logo.png (plus a hash in production). However, if Rails cannot find the image that you named, it will fall back to /images/logo.png.

The next question is: why isn't Rails finding your image? If you put it in app/assets/images/logo.png, then you should be able to access it by going to http://localhost:3000/assets/logo.png.

If that works, but your CSS isn't updating, you may need to clear the cache. Delete tmp/cache/assets from your project directory and restart the server (webrick, etc.).

If that fails, you can also try just using background-image: url(logo.png); That will cause your CSS to look for files with the same relative path (which in this case is /assets).

小开

Rails 4.0.0 will look image defined with image-url in same directory structure with your css file.

For example, if your css in assets/stylesheets/main.css.scss, image-url('logo.png') becomes url(/assets/logo.png).

If you move your css file to assets/stylesheets/cpanel/main.css.scss, image-url('logo.png') becomes /assets/cpanel/logo.png.

If you want to use image directly under assets/images directory, you can use asset-url('logo.png')

小开

I just had this issue myself. 3 points that will hopefully help:

  • If you place images in your app/assets/images directory, then you should be able to call the image directly with no prefix in the path. ie. image_url('logo.png')
  • Depending on where you use the asset will depend on the method. If you are using it as a background-image: property, then your line of code should be background-image: image-url('logo.png'). This works for both less and sass stylesheets. If you are using it inline in the view, then you will need to use the built in image_tag helper in rails to output your image. Once again, no prefixing <%= image_tag 'logo.png' %>
  • Lastly, if you are precompiling your assets, run rake assets:precompile to generate your assets, or rake assets:precompile RAILS_ENV=production for production, otherwise, your production environment will not have the fingerprinted assets when loading the page.

Also for those commands in point 3 you will need to prefix them with bundle exec if you are running bundler.

小开

I had a similar problem, trying to add a background image with inline css. No need to specify the images folder due to the way asset sync works.

This worked for me:

background-image: url('/assets/image.jpg');
小开

for stylesheets: url(asset_path('image.jpg'))

小开

In case anyone arrives looking for how to generate a relative path from the rails console

ActionView::Helpers::AssetTagHelper
image_path('my_image.png')
=> "/images/my_image.png"

Or the controller

include ActionView::Helpers::AssetTagHelper
image_path('my_image.png')
=> "/images/my_image.png"

提交答案