ruby-on-rails - Rails: How to reference images in CSS within Rails 4

Question

There's a strange issue with Rails 4 on Heroku. When images are compiled they have hashes added to them, yet the reference to those files from within CSS don't have the proper name adjusted. Here's what I mean. I have a file called logo.png. Yet when it shows up on heroku it is viewed as:

/assets/logo-200a00a193ed5e297bb09ddd96afb953.png

However the CSS still states:

background-image:url("./logo.png");

The result: the image doesn't display. Anybody run into this? How can this be resolved?

score 404 · Accepted Answer

SprocketsとSassには、仕事を遂行するために使用できる気の利いたヘルパーがいくつかあります。スプロケットは、スタイルシートのファイル拡張子がまたはの場合にのみ.css.scss、これらのヘルパーを処理します.css.sass。

画像固有のヘルパー：

background-image: image-url("logo.png")

不可知論者のヘルパー：

background-image: asset-url("logo.png", image)
background-image: asset-url($asset, $asset-type)

または、画像データをcssファイルに埋め込みたい場合：

background-image: asset-data-url("logo.png")

score 60 · Accepted Answer

Don't know why, but only thing that worked for me was using asset_path instead of image_path, even though my images are under the assets/images/ directory:

Example:

app/assets/images/mypic.png

In Ruby:

asset_path('mypic.png')

In .scss:

url(asset-path('mypic.png'))

UPDATE:

Figured it out- turns out these asset helpers come from the sass-rails gem (which I had installed in my project).

score 37 · Accepted Answer

In Rails 4, you can reference an image located in assets/images/ in your .SCSS files easily like this:

.some-div {
  background-image: url(image-path('pretty-background-image.jpg'));
}

When you launch the application in development mode (localhost:3000), you should see something like:

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

In production mode, your assets will have the cache helper numbers:

background-image: url("/assets/pretty-background-image-8b313354987c309e3cd76eabdb376c1e.jpg");

score 25 · Accepted Answer

The hash is because the asset pipeline and server Optimize caching http://guides.rubyonrails.org/asset_pipeline.html

Try something like this:

 background-image: url(image_path('check.png'));

Goodluck

score 11 · Accepted Answer

In css

background: url("/assets/banner.jpg");

although the original path is /assets/images/banner.jpg, by convention you have to add just /assets/ in the url method

score 10 · Accepted Answer

None of the answers says about the way, when I'll have .css.erb extension, how to reference images. For me worked both in production and development as well :

2.3.1 CSS and ERB

The asset pipeline automatically evaluates ERB. This means if you add an erb extension to a CSS asset (for example, application.css.erb), then helpers like asset_path are available in your CSS rules:

.class { background-image: url(<%= asset_path 'image.png' %>) }

This writes the path to the particular asset being referenced. In this example, it would make sense to have an image in one of the asset load paths, such as app/assets/images/image.png, which would be referenced here. If this image is already available in public/assets as a fingerprinted file, then that path is referenced.

If you want to use a data URI - a method of embedding the image data directly into the CSS file - you can use the asset_data_uri helper.

.logo { background: url(<%= asset_data_uri 'logo.png' %>) }

This inserts a correctly-formatted data URI into the CSS source.

Note that the closing tag cannot be of the style -%>.

score 5 · Accepted Answer

Only this snippet does not work for me:

background-image: url(image_path('transparent_2x2.png'));

But rename stylename.scss to stylename.css.scss helps me.

score 4 · Accepted Answer

WHAT I HAVE FOUND AFTER HOURS OF MUCKING WITH THIS:

WORKS :

background-image: url(image_path('transparent_2x2.png')); 

// how to add attributes like repeat, center, fixed?

The above outputs something like: "/assets/transparent_2x2-ec47061dbe4fb88d51ae1e7f41a146db.png"

Notice the leading "/", and it's within quotes. Also note the scss extension and image_path helper in yourstylesheet.css.scss. The image is in the app/assets/images directory.

Doesn't work:

background: url(image_path('transparent_2x2.png') repeat center center fixed;

doesn't work, invalid property:

background:url(/assets/pretty_photo/default/sprite.png) 2px 1px repeat center fixed;

My last resort was going to be to put these in my public s3 bucket and load from there, but finally got something going.

score 4 · Accepted Answer

Referencing the Rails documents we see that there are a few ways to link to images from css. Just go to section 2.3.2.

First, make sure your css file has the .scss extension if it's a sass file.

Next, you can use the ruby method, which is really ugly:

#logo { background: url(<%= asset_data_uri 'logo.png' %>) }

Or you can use the specific form that is nicer:

image-url("rails.png") returns url(/assets/rails.png)
image-path("rails.png") returns "/assets/rails.png"

Lastly, you can use the general form:

asset-url("rails.png") returns url(/assets/rails.png)
asset-path("rails.png") returns "/assets/rails.png"

score 3 · Accepted Answer

Interestingly, if I use 'background-image', it does not work:

background-image: url('picture.png');

But just 'background', it does:

background: url('picture.png');

score 1 · Accepted Answer

In some cases the following can also be applier

logo { background: url(<%= asset_data_uri 'logo.png' %>) }

Source: http://guides.rubyonrails.org/asset_pipeline.html

score 1 · Accepted Answer

When using gem 'sass-rails', in Rails 5, bootstrap 4, the following worked for me,

in .scss file:

    background-image: url(asset_path("black_left_arrow.svg"));

in view file(e.g. .html.slim):

    style=("background-image: url(#{ show_image_path("event_background.png") })");

score 0 · Accepted Answer

This should get you there every single time.

background-image: url(<%= asset_data_uri 'transparent_2x2.png'%>);

score 0 · Accepted Answer

By default Rails 4 will not serve your assets. To enable this functionality you need to go into config/application.rb and add this line:

config.serve_static_assets = true

https://devcenter.heroku.com/articles/rails-4-asset-pipeline#serve-assets

score 0 · Accepted Answer

In Rails 4, simply use

.hero { background-image: url("picture.jpg"); }

in your style.css file as long as the background image is tucked in app/assets/images.

score 0 · Accepted Answer

0

This worked for me:

background: #4C2516 url('imagename.png') repeat-y 0 0;

于 2016-08-06T21:54:20.477 に答える

score 0 · Accepted Answer

You can add to your css .erb extension. Ej: style.css.erb

Then you can put:

background: url(<%= asset_path 'logo.png' %>) no-repeat;

ruby-on-rails - Rails: How to reference images in CSS within Rails 4

17 に答える 17

logo { background: url(<%= asset_data_uri 'logo.png' %>) }

Related

Reference