Rails 3.1 y activos de imagen

156

He puesto todas mis imágenes para mi tema de administrador en la carpeta de activos dentro de una carpeta llamada admin. Luego lo enlazo como normal, es decir.

# Ruby    
image_tag "admin/file.jpg" .....
#CSS
.logo{ background:url('/assets/images/admin/logo.png');

FYI. Solo para probar, todavía no estoy usando la etiqueta asset_path, ya que no he compilado mis activos.

Ok, todo bien hasta ahora hasta que decidí actualizar una imagen. Reemplacé algunos colores pero al recargar la nueva imagen con estilo no se muestra. Si veo la imagen directamente en el navegador, sigue mostrando la imagen anterior. Yendo un paso más allá, destruí la carpeta de imágenes de administrador. Pero no ha roto nada, todas las imágenes todavía se muestran. Y sí, borré mi caché y probé en varios navegadores.

¿Hay algún tipo de almacenamiento en caché de imágenes? Esto es solo un desarrollo local que usa pow para servir las páginas.

Incluso destruyendo toda la carpeta de imágenes, las imágenes aún se están sirviendo.

¿Me estoy perdiendo de algo?

ruby-on-rails ruby-on-rails-3 Sotavento
fuente
2
ese no es el caso con 3.1 utilizando la canalización de activos. Usaría el comando rake assets: precompile que comprimirá esos archivos y los moverá al archivo público
Lee
2
Bueno, moverlos a la carpeta pública funcionó, todo un poco extraño ya que funcionaron bien al ser servidos desde la carpeta de activos. Tal vez tenga que esperar más documentos en 3.1.
Lee
3
Entiendo tu frustración. Aparentemente, los candidatos liberados no se documentan muy bien.
tybro0103
1
Déjelos en activos, simplemente no incluya una ruta de carpeta en absoluto. Vea mi respuesta a continuación.
Andrew

Respuestas:

226

En 3.1 simplemente te deshaces de la parte de 'imágenes' del camino. Entonces, una imagen que vive en /assets/images/example.pngrealidad estará accesible en una solicitud de obtención en esta url:/assets/example.png

Debido a que la assets/imagescarpeta se genera junto con una nueva aplicación 3.1, esta es la convención que probablemente quieran que sigas. Creo que ahí es donde image_taglo buscaré, pero aún no lo he probado.

Además, durante la nota clave de RailsConf, recuerdo que D2h dijo public folderque ya no debería tener mucho, principalmente páginas de error y un favicon.

Lee McAlilly
fuente
Sí, he jugado con este lote y tienen un camino por recorrer para hacerlo más fácil. Sí, ponerlos en mi carpeta de activos funciona, pero luego puede usar la etiqueta de activos. Así que estoy esperando ver qué más información sale.
Lee
1
Gracias, también me ayudó mucho. Este es el tipo de cosas que me están volviendo loco como un tipo que trata de aprender que Rails proviene de otros marcos de desarrollo web.
jn29098
66
¿Y qué pasaría si dos carpetas diferentes contuvieran el mismo nombre de archivo?
Hady Elsahar
66
¿No debería ser DH2?
Tiago Franco
1
No estoy seguro de por qué tuvieron que cambiar algo que ya funcionó.
Tastybrownies
98

Usted querrá cambiar la extensión de su archivo css de .css.scssa .css.scss.erby hacer:

background-image:url(<%=asset_path "admin/logo.png"%>);

Es posible que deba realizar una "actualización completa" para ver los cambios. CMD + SHIFT + R en los navegadores OSX.

En producción, asegúrese de

rm -rf public/assets    
bundle exec rake assets:precompile RAILS_ENV=production

sucede al momento del despliegue.

tybro0103
fuente
44
Hay nuevos ayudantes de imagen en sass: image_url, image_path, ... Más se puede encontrar aquí: edgeguides.rubyonrails.org/asset_pipeline.html Ya no es necesario usar erb como preprocesador
Martin Wawrusch
1
Probé los ayudantes sass-rails (image_url e image-url) en un archivo css.scss pero no parece ser interpretado. Cualquier pista ?
invaino
2
Los archivos scss generados se denominan .css.scss por defecto, todavía no se ha cagado la cama
Adrian Macneil
2
Por alguna razón, image-url no funcionó para mí, pero asset-url ('myimage.png', image) funcionó perfectamente. (Rails 3.1)
Elad
1
En caso de que alguien que esté actualizando desde 3.0 se pregunte, puede cambiar el nombre de sus hojas de estilo .cssa .css.erb(después de que las haya movido app/assetspara obtener el procesamiento erb sin sass.)
William Denniss
22

Para lo que vale, cuando hice esto, descubrí que ninguna carpeta debería incluirse en la ruta en el archivo css. Por ejemplo, si tengo app/assets/images/example.png, y pongo esto en mi archivo CSS ...

div.example { background: url('example.png'); }

... entonces de alguna manera funciona mágicamente. Me di cuenta de esto mediante la ejecución de la rake assets:precompiletarea, que es un asco todo de todas sus rutas de carga y vuelca en una carpeta cajón de basura: public/assets. Eso es irónico, OMI ...

En cualquier caso, esto significa que no necesita poner ninguna ruta de carpeta, todo en sus carpetas de activos terminará viviendo en un directorio enorme. La forma en que este sistema resuelve los conflictos de nombre de archivo no está clara, es posible que deba tener cuidado al respecto.

Es frustrante que no haya mejores documentos disponibles para este gran cambio.

Andrés
fuente
3
Cuando hay conflictos de nombres, la primera ruta que aparece en la matriz config.assets.paths es el archivo que se elige. Esto se puede evitar utilizando el asset_path()ayudante y especificando el directorio.
Joseph Ravenwolfe
66
Esto "funciona mágicamente" porque el archivo CSS y las imágenes están en la misma ubicación. Las referencias de archivos CSS son relativas a la ubicación del archivo css.
Bill Leeper el
La cartera de activos puede ser un poco un cuadro negro, especialmente para los desarrolladores front-end, pero ofrece muchas características excelentes, como no tener que preocuparse por las rutas de archivos y el bloqueo automático de caché.
Millas el
16

En los rieles 4 ahora puede usar una URL de imagen CSS y sass helper: 

div.logo {background-image: image-url("logo.png");}

Si sus imágenes de fondo no aparecen, considere ver cómo las está haciendo referencia en sus hojas de estilo.

lflores
fuente
1
Esto es correcto (para los rieles 4). ¡Vota esta respuesta!
ahnbizcad
Rails 'lo ayuda' al poner la palabra clave url y la cadena. Esto significa que puedes hacer cosas como. div.logo {background: image-url("logo.png") no-repeat center;}
Antony Denyer
10

al hacer referencia a imágenes en CSS o en una etiqueta IMG, use image-name.jpg

mientras que la imagen se encuentra realmente en ./assets/images/image-name.jpg

Tilo
fuente
Creo que esto está mal cuando se trata de CSS: el uso de rails 3.1.0.rc4 cuando lo uso background: url('sort_asc_disabled.png')funciona para el archivo app / assets / images / sort_asc_disabled.png.
wonderfulthunk
2

http://railscasts.com/episodes/279-understanding-the-asset-pipeline

Este railscast (video Tutorial de Rails sobre la canalización de activos) también ayuda mucho a explicar las rutas en la canalización de activos. Lo encontré bastante útil, y en realidad lo vi algunas veces.

La solución que elegí es la de @Lee McAlilly, pero este railscast me ayudó a entender por qué funciona. ¡Espero eso ayude!

botbot
fuente
0

La canalización de activos en rieles ofrece un método para esto exactamente.

Simplemente agregue image_path ('nombre de archivo de imagen') a su archivo css o scss y rails se encarga de todo. Por ejemplo:

.logo{ background:url(image_path('admin/logo.png'));

(tenga en cuenta que funciona igual que en una vista .erb, y no utiliza "/ assets" o "/ assets / images" en la ruta)

Rails también ofrece otros métodos auxiliares, y hay otra respuesta aquí: ¿Cómo uso imágenes de referencia en Sass cuando uso Rails 3.1?

benrugg
fuente
Sé que esta pregunta tiene un par de años, pero esta fue la primera página que encontré en Google al buscarla, por lo que sería increíble seleccionar una respuesta para que otros puedan hacer referencia a esto fácilmente.
benrugg