Rails 4 image path, image URL and resource URL no longer work in SCSS files

Question

Do we intend to use anything else besides image-url and others in Rails 4? They return different values ​​that do not seem to make sense. If I have logo.png in /app/assets/images/logo.png and I do the following, this is what I get:

 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 them work, because they need at least /assets in front.

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

 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 raise my logo.png is to move it to the /app/assets/stylesheets directory and then pull it up:

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

Answer 1

I just had this problem. 3 points that hopefully help:

• If you place images in your app/assets/images directory, you should be able to directly call the image without a prefix in the path. i.e. image_url('logo.png')
• Depending on where you use the asset, the method will depend. If you use it as the background-image: property, then your line of code should be background-image: image-url('logo.png') . This works for both smaller stylesheets and sass. If you use its built-in view, you will need to use the built-in image_tag in rails to display your image. Once again, the prefix <%= image_tag 'logo.png' %>
• Finally, if you precompile your assets, run rake assets:precompile to create your assets or rake assets:precompile RAILS_ENV=production for production, otherwise your production environment will not have fingerprints when loading the page.

Also for these commands in step 3, you will need to prefix them with bundle exec if you run the package.

Answer 2

Your first wording image_url('logo.png') correct. If the image is found, it will generate the path /assets/logo.png (plus a hash during production). However, if Rails cannot find the image you named, it will return to /images/logo.png .

Next question: why doesn't Rails find your image? If you put it in app / assets / images / logo.png, you should have access to it by going to http://localhost:3000/assets/logo.png .

If this works, but your CSS is not updating, you may need to clear the cache. Remove tmp/cache/assets from the project directory and restart the server (webrick, etc.).

If this fails, you can also try just using background-image: url(logo.png); . This will force your CSS to look for files with the same relative path (which in this case is / assets).

Answer 3

I had a similar problem trying to add a background image with inline css. There is no need to specify an image folder due to how resource synchronization works.

This worked for me:

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

Answer 4

I just found out that with the asset_url you are asset_url this problem.

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

Answer 5

Rails 4.0.0 will look like an image with image-url in the same directory structure with your css file.

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

If you move your css file to assets/stylesheets/cpanel/main.css.scss , image-url('logo.png') will become /assets/cpanel/logo.png .

If you want to use the image directly in the resource / image directory, you can use asset-url('logo.png')

Answer 6

for style sheets: URL (asset_path ('image.jpg'))