Heroku上的Rails 4有一个奇怪的问题。当图像被编译时,它们被添加了散列,但从CSS中引用这些文件时没有适当的名称调整。这就是我的意思。我有一个叫logo。png的文件。然而,当它出现在heroku上时,它被视为:
/assets/logo-200a00a193ed5e297bb09ddd96afb953.png
然而,CSS仍然声明:
background-image:url("./logo.png");
结果是:图像无法显示。有人遇到过这种情况吗?如何解决这个问题?
Heroku上的Rails 4有一个奇怪的问题。当图像被编译时,它们被添加了散列,但从CSS中引用这些文件时没有适当的名称调整。这就是我的意思。我有一个叫logo。png的文件。然而,当它出现在heroku上时,它被视为:
/assets/logo-200a00a193ed5e297bb09ddd96afb953.png
然而,CSS仍然声明:
background-image:url("./logo.png");
结果是:图像无法显示。有人遇到过这种情况吗?如何解决这个问题?
当前回答
我摆弄了几个小时后发现:
工作原理:
background-image: url(image_path('transparent_2x2.png'));
// how to add attributes like repeat, center, fixed?
上面的输出类似于:“/assets/transparent_2x2-ec47061dbe4fb88d51ae1e7f41a146db.png”
注意前面的“/”,它在引号内。 还要注意stylesheet.css.scss中的scss扩展和image_path帮助器。图片在app/assets/images目录下。
不工作:
background: url(image_path('transparent_2x2.png') repeat center center fixed;
无效属性:
background:url(/assets/pretty_photo/default/sprite.png) 2px 1px repeat center fixed;
我最后的办法是把这些放到我的公共s3桶里,然后从那里加载,但最后还是有了一些东西。
其他回答
我摆弄了几个小时后发现:
工作原理:
background-image: url(image_path('transparent_2x2.png'));
// how to add attributes like repeat, center, fixed?
上面的输出类似于:“/assets/transparent_2x2-ec47061dbe4fb88d51ae1e7f41a146db.png”
注意前面的“/”,它在引号内。 还要注意stylesheet.css.scss中的scss扩展和image_path帮助器。图片在app/assets/images目录下。
不工作:
background: url(image_path('transparent_2x2.png') repeat center center fixed;
无效属性:
background:url(/assets/pretty_photo/default/sprite.png) 2px 1px repeat center fixed;
我最后的办法是把这些放到我的公共s3桶里,然后从那里加载,但最后还是有了一些东西。
在css中
background: url("/assets/banner.jpg");
尽管原始路径是/assets/images/banner.jpg,但按照惯例,您必须在url方法中只添加/assets/
默认情况下,Rails 4不会为您的资产服务。要启用此功能,您需要进入配置/应用程序。Rb,加上这一行:
config.serve_static_assets = true
https://devcenter.heroku.com/articles/rails-4-asset-pipeline#serve-assets
没有一个答案是关于。css的。Erb扩展,如何引用图像。对我来说,我同时从事生产和开发工作:
2.3.1 CSS和ERB
资产管道自动评估ERB。这意味着如果你添加一个erb扩展到一个CSS资产(例如,application.css.erb),那么像asset_path这样的助手在你的CSS规则中是可用的:
.class { background-image: url(<%= asset_path 'image.png' %>) }
这将写入被引用的特定资产的路径。在这个例子中,在一个资源加载路径中有一个图像是有意义的,比如app/assets/images/image.png,这里将引用它。如果此图像已作为指纹文件在公共/资产中可用,则会引用该路径。
如果您想使用数据URI(一种将图像数据直接嵌入到CSS文件中的方法),您可以使用asset_data_uri帮助器。
.logo { background: url(<%= asset_data_uri 'logo.png' %>) }
这将在CSS源中插入格式化正确的数据URI。
注意,结束标记的样式不能是-%>。
这应该能让你每次都做到。
background-image: url(<%= asset_data_uri 'transparent_2x2.png'%>);