如何在 Rails 4.0 中引用生产环境中的 CSS 背景图像? [英] How can I reference CSS background images in production in Rails 4.0?

问题描述

我将应用程序从 3.2.12 切换到 4.0.0.rc1.当我后来在生产中查看它时，背景图像消失了.我的其余图片资源都没有问题.

I switched an app over from 3.2.12 to 4.0.0.rc1. When I viewed it in production afterwards, the background image had disappeared. The rest of my image assets were fetched with no problem.

在我的日志中，我看到所有成功渲染的图像的末尾都附有摘要，如下所示:

In my logs, I saw that all the successfully rendered images had a digest tacked to the end of them, like so:

2013-05-12T19:57:05.856277+00:00 heroku[router]: at=info method=GET path=/asset/explore-9ec2a1cfd4784133755637f6ef6d5673.png host=xxx.herokuapp.com fwd="69.140.148.75" dyno=web.1 connect=3ms service=5ms status=200 bytes=4064

我失败的背景图片没有摘要，还有 404 响应代码:

And my unsuccessful background image had no digest on it, plus a 404 response code:

2013-05-12T19:57:05.736354+00:00 heroku[router]: at=info method=GET path=/assets/background.png host=xxxx.herokuapp.com fwd="69.140.148.75" dyno=web.1 connect=2ms service=7ms status=404 bytes=728

在 production.rb 文件中，有一个配置行可以用于缓存目的:

In the production.rb file, there's a config line that enables this for caching purposes:

# Generate digests for assets URLs
config.assets.digest = true

这是背景的CSS:

body {
  background-image: url('background.png');
  background-attachment: fixed;
  background-position: 100% 100%;
  background-repeat: no-repeat;
}

我得出的结论是，我的 CSS 文件试图获取一个不存在的图像 url，因为它引用了最后没有散列的普通资产(background.png").这只是 CSS 中图像的问题；我的 .erb 文件中引用的所有图像都很好.那么如何在我的 CSS 中引用这个资产而不对摘要进行硬编码?有什么解决方法吗?

I concluded that my CSS file was trying to fetch an image url that didn't exist, because it was referencing the plain asset ("background.png") without the hash at the end. This is only an issue for images in the CSS; all images referenced in my .erb files are fine. So how do I reference this asset in my CSS without hardcoding the digest in? Are there any workarounds?

感谢阅读.

推荐答案

使用 asset-url.Rails 将对此进行预处理并扩展正确的 url.

Use asset-url. Rails will preprocess this and expand the proper url.

body {
  background-image: asset-url('background.png');
  background-attachment: fixed;
  background-position: 100% 100%;
  background-repeat: no-repeat;
}

这篇关于如何在 Rails 4.0 中引用生产环境中的 CSS 背景图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！