Cómo hacer referencia a imágenes en CSS dentro de Rails 4


205

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?


1
Solo para tu información, Heroku ha confirmado que es un error ... están trabajando en una solución
Nick ONeill el

¿Puedes dar una actualización sobre esto? Tengo el mismo problema
Minh Danh

Respuestas:


392

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

21
asset-data-urlfunciona para mí después de cambiar mi archivo .css a .css.scss en una aplicación Rails 4. ¡Gracias!
fatman13

@ fatman13 Sí, hasta donde yo sé, esto solo funciona con archivos .scss y .sass.
zeeraw

Jeff: El resto funciona si las opciones de URL de tu activo están configuradas correctamente. No se aplica asset-data-urlporque incrusta todo el archivo dentro de la hoja de estilo.
zeeraw

1
Similar a @ fatman13 desde que estaba usando sass-rails, finalmente terminé agregando la extensión de archivo .scssa los archivos .css ofensivos para que todos terminen en .css.scss, luego reemplacé todas las instancias de url('blah.png')con url(asset-path('blah.png'))(en mi caso, todos los blah.pngs estaban en un /vendored carpeta).
likethesky

asset-url($asset)debería usarse para las ruedas dentadas 3, la versión con $asset-typeprobablemente funciona con alguna versión anterior
Prusswan

59

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


2
funciona para mí, realmente muy buena solución de rieles. Gracias @Yarin
AMIC MING

1
¡Si! ¡Después de varias horas de golpearme la cabeza contra la pared, su solución de "ruta de activos" finalmente funcionó para mí en mi archivo .css.scss! background-image: url(asset-path('off.png'))
Raymond Gan

36

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");

1
@MikeLyons: solo lo probé en un nuevo proyecto Rails 4.1 y lo implementé en Heroku y está funcionando bien para mí. Debes haber tocado algo production.rb.
sergserg


11

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


1
Usando CSS simple, pensé que me estaba volviendo loco, ¡gracias!
Craig McGuff

2
esto no se compilará en producción
dimitry_n

Wow, gracias, eso no es muy intuitivo. Así que supongo que todos los activos en los caminos de activos ( vendor/assets, app/assets, lib/assets, etc.) Se puede combinar en una sola carpeta después de activos prepossessing es completa?
ohhh

Esto no funcionará en Producción porque en Producción sus activos se compilan con un hash MD5 fijado al final del nombre y, con la configuración típica, /assets/banner.jpgno funcionará. En cambio, será algo así /assets/banner-f719451f1e0ddd15f153c4eedde044b2.jpg. TL; DR No uses esto.
Joshua Pinter

10

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


5

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.


4

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"

3

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.


Para cualquiera que venga aquí y siga teniendo problemas: asegúrese de que su archivo css esté actualizado y que no haya precompilado sus activos localmente y se haya olvidado de actualizarlos.
Hartwig

Hartwig: ¿qué significa eso? ¿Quiere decir que debe ejecutar la precompilación nuevamente antes de que este método funcione? He intentado todo lo sugerido en esta publicación (todo) y nada funciona para mí
Mel

2

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

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

Pero solo 'fondo', lo hace:

background: url('picture.png');

pero eso solo funciona desde el archivo scss, no cuando se coloca en una asignación de propiedad de estilo dentro de un div ... estoy confundido
AnderSon


1

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") })");

0

Esto debería llevarte allí cada vez.

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


0

En Rails 4, simplemente use

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

en su archivo style.css siempre que la imagen de fondo esté oculta en app / assets / images.


Lea la pregunta completa
Adriano Resende

0

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

Entonces puedes poner:

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

0

Esto funcionó para mí:

background: #4C2516 url('imagename.png') repeat-y 0 0;
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.