Rails 4 image-path,image-url和asset-url不再适用于SCSS文件

Question

我们是否应该使用image-urlRails 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.但是,如果我转到以下任何网址,我仍然看不到我的图片:

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

Answer 1

我自己就是这个问题.3点有望帮助:

• 如果将图像放在app/assets/images目录中,则应该能够直接调用图像,路径中没有前缀.即.image_url('logo.png')
• 根据您使用的位置,资产取决于方法.如果您将它用作background-image:属性,那么您的代码行应该是background-image: image-url('logo.png').这适用于less和sass样式表.如果您在视图中内联使用它,那么您将需要使用image_tagrails中的内置帮助程序来输出图像.再一次,没有前缀<%= image_tag 'logo.png' %>
• 最后,如果您要预编译资产,运行rake assets:precompile以生成资产或rake assets:precompile RAILS_ENV=production生产,否则,生成环境在加载页面时将不会有指纹资产.

对于第3点中的那些命令,bundle exec如果您正在运行bundler ,则需要为它们添加前缀.

Answer 2

你的第一个配方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).

Answer 3

我刚刚发现,通过使用asset_url帮助器,你解决了这个问题.

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

Answer 4

我遇到了类似的问题,尝试使用内联css添加背景图像.由于资产同步的工作方式,无需指定images文件夹.

这对我有用:

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

Answer 5

Rails 4.0.0 将image-url在与您的 css 文件相同的目录结构中查找图像。

例如，如果您的 css in assets/stylesheets/main.css.scss,image-url('logo.png')变为url(/assets/logo.png).

如果您将 css 文件移动到assets/stylesheets/cpanel/main.css.scss,image-url('logo.png')变为/assets/cpanel/logo.png.

如果想直接在assets/images目录下使用image，可以使用 asset-url('logo.png')

Answer 6

对于样式表： url(asset_path('image.jpg'))