Ruby-on-rails Rails 4 image-path、image-url 和 asset-url 在 SCSS 文件中不再有效

Rails 4 image-path, image-url and asset-url no longer work in SCSS files

提问by at.

Are we supposed to use something else aside from image-urland others in Rails 4? They return different values that don't seem to make sense. If I have logo.pngin /app/assets/images/logo.pngand I do the following, this is what I get:

除了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")

Of course none of these work because they need at least /assetsin front.

当然，这些都不起作用，因为它们至少需要/assets在前面。

UPDATE: Actually, I just noticed, how do I access images in Rails 4? I have an image at /app/assets/images/logo.png. But if I go to any of the following URLs, I still don't see my image:

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

UPDATE 2: The only way I can bring up my logo.pngis by moving it into the /app/assets/stylesheetsdirectory and then pulling up:

更新 2：我可以调出我的唯一方法logo.png是将其移动到/app/assets/stylesheets目录中然后拉起：

http://localhost:3000/assets/logo.png

回答by cdaloisio

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

我自己刚遇到这个问题。希望有帮助的3点：

• If you place images in your app/assets/imagesdirectory, 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_taghelper in rails to output your image. Once again, no prefixing <%= image_tag 'logo.png' %>
• Lastly, if you are precompiling your assets, run rake assets:precompileto generate your assets, or rake assets:precompile RAILS_ENV=productionfor production, otherwise, your production environment will not have the fingerprinted assets when loading the page.

• 如果您将图像放在app/assets/images目录中，那么您应该能够在路径中没有前缀的情况下直接调用图像。IE。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用于生产，否则，您的生产环境在加载页面时将没有指纹资产。

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

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

回答by Nick Urban

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.

您的第一个公式image_url('logo.png')是正确的。如果找到图像，它将生成路径/assets/logo.png（加上生产中的哈希）。但是，如果 Rails 找不到您命名的图像，它将回退到/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.

下一个问题是：为什么 Rails 找不到您的图像？如果你把它放在 app/assets/images/logo.png 中，那么你应该可以通过访问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/assetsfrom your project directory and restart the server (webrick, etc.).

如果这样做有效，但您的 CSS 没有更新，您可能需要清除缓存。tmp/cache/assets从您的项目目录中删除并重新启动服务器（webrick 等）。

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).

如果失败，您也可以尝试仅使用background-image: url(logo.png);That 将导致您的 CSS 查找具有相同相对路径（在本例中为 /assets）的文件。

回答by Leftis

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

我刚刚发现，通过使用asset_urlhelper 可以解决这个问题。

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

回答by ykwx

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.

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

This worked for me:

这对我有用：

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

回答by user2586863

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

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

回答by kuntoaji

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

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

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

例如，如果您的 css in assets/stylesheets/main.css.scss,image-url('logo.png')变为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.

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

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

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