Rails 4的图像路径，图像URL和资产URL在SCSS文件中不再起作用

99

我们是否应该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

ruby-on-rails asset-pipeline ruby-on-rails-4

— 在。
source

试试这个：asset_path("logo.png", image)

— Marcelo De Polli13年

@depa-简单地转换为“ /logo.png”，不会显示我的图像。

— 在。

3

您是在.css文件中还是在.css.scss文件中使用该帮助程序？

— Marcelo De Polli13年

@depa-不使用任何帮助器。我认为这是资产只是不工作对我的图片文件夹，一个更大的问题

— 在。

1

@depa-哦，我明白你在问什么。它在.css.scss文件中

— 位于。

113

我本人只是遇到这个问题。有3点希望对您有所帮助：

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

同样，对于第3点中的那些命令，bundle exec如果您正在运行捆绑程序，则还需要给它们加上前缀。

— Cdaloisio
source

1

另一点是阅读文档guides.rubyonrails.org/asset_pipeline.html。您还可以在浏览器的Web开发人员调试中看到是否正在加载图像吗？

— H.Rabiee

3

现在，这就是您编写答案的方式。每个场景。预测“假设”，没有松懈的结局。有人“见过战斗”的标记（确实解决了问题）。

— ahnbizcad 2014年

我几次都因为错过RAILS_ENV = production而被咬了。

— Sixty4Bit

62

您的第一个公式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);That，这将导致CSS查找具有相同相对路径（在本例中为/ assets）的文件。

— 尼克·厄本（Nick Urban）
source

2

只是为了跳过这一点，我在图像路径上使用双引号而不是单引号被咬住了。在css / scss文件中，您经常在资产助手中使用单引号。

— d_ethier 2014年

我收到“未定义的局部变量或方法'image'”

— Muhammad Umer

您是否有可能在单词image之前不小心加了空格？

— Nick Urban'3

10

我刚刚发现，通过使用asset_url帮助程序可以解决该问题。

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

— 左撇子
source

我undefined local variable or method 'image'出错了。

— 企鹅

也许有些改变了，这个答案是旧的！您可以尝试asset_path("<your_path>", type: :image)

— Leftis

8

我有一个类似的问题，试图用内联CSS添加背景图片。由于资产同步的工作方式，无需指定images文件夹。

这对我有用：

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

— k
source

谢谢，我正在这样做，assets/img.jpg或者../assets/img.jpg显然在任何目录中都不起作用。/assets/img.jpg做。TY

— ElliotM

5

Rails 4.0.0看起来将image-url在与css文件相同的目录结构中定义的图像。

例如，如果你的CSS中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目录下使用图像，则可以使用 asset-url('logo.png')

— 昆托吉
source

5

样式表：url（asset_path（'image.jpg'））

— 用户名
source

3

什么之间的主要区别url(asset_path('image.jpg')，url('image.jpg')和image-url('image.jpg')？我工作的Rails 5.0.0.1和url()在正常工作SCSS文件和html.erb文件我用asset_path()，所以我想知道正确的方式去。提前致谢。

— alexventuraio

asset_path将摘要附录添加到图像文件。它实际上是用于生产的，每次部署后，摘要附录都将更改，并且用户的浏览器将下载新版本的图像。

— 亚历克斯·科金