ruby-on-rails - ejemplos - ruby on rails que es
Rails 3.1 y activos de imagen (7)
Deseará cambiar la extensión de su archivo css de .css.scss
a .css.scss.erb
y hacer:
background-image:url(<%=asset_path "admin/logo.png"%>);
Es posible que deba hacer una "actualización" 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
ocurre al momento del despliegue.
He puesto todas mis imágenes para mi tema de administrador en la carpeta de activos dentro de una carpeta llamada admin. Luego me enlace a él como es 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 volver a cargar, la nueva imagen con estilo no se muestra. Si veo la imagen directamente en el navegador aún muestra la imagen anterior. Yendo un paso más adelante destruí la carpeta de imágenes del administrador. Pero no ha roto nada, todas las imágenes todavía se muestran. Y sí, he borrado mi caché y lo he probado en varios navegadores.
¿Hay algún tipo de almacenamiento en caché de imágenes? Esto es solo desarrollo local usando 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?
El inventario de activos en rieles ofrece un método para esta cosa exacta.
Simplemente agregue image_path (''nombre de archivo de imagen'') a su archivo css o scss y los rieles se encargan 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 de ayuda, y aquí hay otra respuesta: ¿Cómo uso las imágenes de referencia en Sass cuando uso Rails 3.1?
En 3.1 simplemente te deshaces de la parte de ''imágenes'' de la ruta. Por lo tanto, una imagen que se encuentre en /assets/images/example.png
será accesible en una solicitud de obtención en esta url - /assets/example.png
Como la carpeta assets/images
se genera junto con una nueva aplicación 3.1, esta es la convención que probablemente quieran que sigas. Creo que es donde image_tag
lo buscará, pero aún no lo he probado.
Además, durante el discurso de apertura de RailsConf, recuerdo que D2h decía que la public folder
ya no debería tener mucho, en su mayoría solo páginas de error y un favicon.
En Rails 4 ahora puede usar un css y sass helper image-url:
div.logo {background-image: image-url("logo.png");}
Si sus imágenes de fondo no se muestran, considere analizar cómo las está haciendo referenciando en sus hojas de estilo.
Por lo que vale, cuando hice esto encontré que ninguna carpeta debería incluirse en la ruta en el archivo css. Por ejemplo, si tengo app/assets/images/example.png
, y puse esto en mi archivo css ...
div.example { background: url(''example.png''); }
... de alguna manera mágicamente funciona. Lo descubrí ejecutando los rake assets:precompile
tarea de rake assets:precompile
, que simplemente absorbe todo de todas las rutas de carga y las descarga en una carpeta de cajón basura: public/assets
. Eso es irónico, IMO ...
En cualquier caso, esto significa que no necesita colocar ninguna ruta de carpeta, todo en sus carpetas de activos terminará viviendo en un enorme directorio. No está claro cómo este sistema resuelve los conflictos de nombres de archivos; es posible que deba tener cuidado al respecto.
Es frustrante que no haya mejores documentos para este gran cambio.
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
http://railscasts.com/episodes/279-understanding-the-asset-pipeline
Esta transmisión de rieles (video tutorial de Rails sobre la canalización de activos) también ayuda mucho a explicar las rutas en la cartera de activos. Lo encontré bastante útil, y de hecho lo vi un par de veces.
La solución que elegí es la de @Lee McAlilly, pero esta transmisión me ayudó a entender por qué funciona. ¡Espero eso ayude!