Hay un problema extraño con Rails 4 en Heroku. Cuando se compilan las imágenes, se les agrega hash, pero la referencia a esos archivos desde CSS no tiene el nombre apropiado ajustado. Esto es lo que quiero decir. Tengo un archivo llamado logo.png. Sin embargo, cuando aparece en heroku, se ve como:

/assets/logo-200a00a193ed5e297bb09ddd96afb953.png

Sin embargo, el CSS aún establece:

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

El resultado: la imagen no se muestra. ¿Alguien se topó con esto? ¿Como puede ésto ser resuelto?

Sprockets junto con Sass tiene algunos ayudantes ingeniosos que puedes usar para hacer el trabajo. Sprockets solo procesará estos ayudantes si las extensiones de archivo de su hoja de estilo son .css.scsso .css.sass.

Ayudante de imagen específica:

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

Ayudante agnóstico:

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

O si desea incrustar los datos de la imagen en el archivo css:

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

No sé por qué, pero lo único que funcionó para mí fue usar asset_path en lugar de image_path , a pesar de que mis imágenes están en el directorio assets / images / :

Ejemplo:

app/assets/images/mypic.png

En rubí:

asset_path('mypic.png')

En .scss:

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

ACTUALIZAR:

Me di cuenta de que estos ayudantes de activos provienen de la gema sass-rails (que había instalado en mi proyecto).

En Rails 4, puede hacer referencia a una imagen ubicada assets/images/en sus .SCSSarchivos fácilmente así:

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

Cuando inicie la aplicación en modo de desarrollo ( localhost:3000), debería ver algo como:

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

En el modo de producción, sus activos tendrán los números de ayuda de caché:

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

El hash se debe a que el canal de activos y el servidor optimizan el almacenamiento en caché http://guides.rubyonrails.org/asset_pipeline.html

Intenta algo como esto:

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

Buena suerte

En css

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

aunque la ruta original es /assets/images/banner.jpg, por convención debe agregar solo / assets / en el método de URL

Ninguna de las respuestas dice sobre la forma, cuando tendré .css.erbextensión, cómo hacer referencia a las imágenes . Para mí trabajé tanto en producción como en desarrollo :

2.3.1 CSS y ERB

La canalización de activos evalúa automáticamente ERB . Esto significa que si agrega una extensión erb a un activo CSS (por ejemplo, application.css.erb), los ayudantes similares asset_pathestán disponibles en sus reglas CSS:

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

Esto escribe la ruta al activo particular al que se hace referencia. En este ejemplo, tendría sentido tener una imagen en una de las rutas de carga de activos, como app/assets/images/image.png, que se mencionará aquí. Si esta imagen ya está disponible public/assetscomo un archivo de huellas digitales, entonces se hace referencia a esa ruta.

Si desea usar un URI de datos, un método para incrustar los datos de la imagen directamente en el archivo CSS , puede usar el asset_data_uriayudante.

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

Esto inserta un URI de datos con el formato correcto en la fuente CSS.

Tenga en cuenta que la etiqueta de cierre no puede ser del estilo -%>.

Solo este fragmento no funciona para mí:

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

Pero renombrar stylename.scss a stylename.css.scss me ayuda.

Haciendo referencia a los documentos de Rails , vemos que hay algunas formas de vincular a imágenes desde CSS. Simplemente vaya a la sección 2.3.2.

Primero, asegúrese de que su archivo css tenga la extensión .scss si es un archivo sass.

A continuación, puede usar el método ruby, que es realmente feo:

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

O puede usar la forma específica que es más agradable:

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

Por último, puede usar la forma general:

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

LO QUE HE ENCONTRADO DESPUÉS DE HORAS DE MUCHO CON ESTO:

TRABAJOS :

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

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

Lo anterior genera algo como: "/assets/transparent_2x2-ec47061dbe4fb88d51ae1e7f41a146db.png"

Observe el "/" inicial , y está entre comillas . También tenga en cuenta la extensión scss y el ayudante image_path en yourstylesheet.css.scss. La imagen está en el directorio app / assets / images .

No funciona

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

no funciona, propiedad no válida:

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

Mi último recurso sería ponerlos en mi cubo público s3 y cargarlos desde allí, pero finalmente conseguí algo.

Curiosamente, si uso 'background-image', no funciona:

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

Pero solo 'fondo', lo hace:

background: url('picture.png');

En algunos casos, lo siguiente también puede ser aplicable

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

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

Al usar gemas 'sass-rails', en Rails 5, bootstrap 4, lo siguiente funcionó para mí,

en el archivo .scss:

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

en el archivo de vista (por ejemplo, .html.slim):

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

Esto debería llevarte allí cada vez.

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

Por defecto, Rails 4 no servirá sus activos. Para habilitar esta funcionalidad, debe ir a config / application.rb y agregar esta línea:

config.serve_static_assets = true

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

En Rails 4, simplemente use

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

Puede agregar a su extensión css .erb. Ej: style.css.erb

Entonces puedes poner:

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

Esto funcionó para mí:

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