Rails 3.1 et éléments d'image

156

J'ai mis toutes mes images pour mon thème d'administration dans le dossier des actifs dans un dossier appelé admin. Ensuite, je lie comme normal ie.

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

FYI. Juste pour tester, je n'utilise pas encore la balise asset_path car je n'ai pas compilé mes actifs.

Ok tout va bien jusqu'à ce que je décide de mettre à jour une image. J'ai remplacé certaines couleurs mais lors du rechargement, la nouvelle image stylisée ne s'affiche pas. Si je regarde l'image directement dans le navigateur, elle affiche toujours l'ancienne image. Pour aller plus loin, j'ai détruit le dossier des images d'administration. Mais il n'a rien cassé toutes les images sont toujours affichées. Et oui, j'ai effacé mon cache et essayé plusieurs navigateurs.

Existe-t-il une sorte de mise en cache d'images? Il ne s'agit que d'un développement local utilisant pow pour servir les pages.

Même en détruisant tout le dossier d'images, les images sont toujours servies.

Est-ce que je manque quelque chose?

ruby-on-rails ruby-on-rails-3 Lee
la source
2
ce n'est pas le cas avec 3.1 utilisant le pipeline d'actifs. Vous utiliseriez la commande rake assets: precompile qui compressera ces fichiers et les déplacera vers le fichier public
Lee
2
Eh bien, les déplacer vers le dossier public a fonctionné, tous un peu étranges car ils fonctionnaient bien étant servis à partir du dossier des actifs. Il faudra peut-être attendre plus de documentation sur la version 3.1.
Lee
3
Je comprends votre frustration. Apparemment, les candidats à la libération ne sont pas très bien documentés.
tybro0103
1
Laissez-les dans les actifs, n'incluez tout simplement pas de chemin de dossier. Voir ma réponse ci-dessous.
Andrew

Réponses:

226

En 3.1, vous supprimez simplement la partie «images» du chemin. Ainsi, une image qui vit dans /assets/images/example.pngsera en fait accessible dans une demande d'obtention à cette URL -/assets/example.png

Étant donné que le assets/imagesdossier est généré avec une nouvelle application 3.1, c'est la convention qu'ils souhaitent probablement que vous suiviez. Je pense que c'est là que je image_tagvais le chercher, mais je ne l'ai pas encore testé.

De plus, lors de la keynote de RailsConf, je me souviens que D2h avait dit que le public folderne devrait plus contenir grand chose, principalement des pages d'erreur et un favicon.

Lee McAlilly
la source
Oui, j'ai joué avec ce lot et ils ont du chemin à faire pour le rendre plus facile. Oui, les mettre dans mon dossier d'actifs fonctionne, mais vous pouvez ensuite utiliser l'étiquette d'actifs. J'attends donc de voir quelles informations supplémentaires sortiront.
Lee
1
Merci, m'a beaucoup aidé aussi. C'est le genre de choses qui me rend fou en tant que mec essayant d'apprendre les Rails venant d'autres frameworks de développement Web.
jn29098
6
et que se passerait-il si deux dossiers différents contenaient le même nom de fichier?
Hady Elsahar
6
Ne devrait-il pas être DH2?
Tiago Franco
1
Je ne sais pas pourquoi ils ont dû changer quelque chose qui fonctionnait déjà.
Tastybrownies
98

Vous voulez changer l'extension de votre fichier CSS de .css.scssà .css.scss.erbne pas manquer:

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

Vous devrez peut-être effectuer une "actualisation matérielle" pour voir les modifications. CMD + SHIFT + R sur les navigateurs OSX.

En production, assurez-vous

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

se produit lors du déploiement.

tybro0103
la source
44
Il y a de nouveaux assistants d'image dans sass: image_url, image_path, ... Plus peuvent être trouvés ici: edgeguides.rubyonrails.org/asset_pipeline.html Plus besoin d'utiliser erb comme préprocesseur
Martin Wawrusch
1
J'ai essayé les helpers sass-rails (image_url et image-url) dans un fichier css.scss mais cela ne semble pas être interprété. Un indice?
invaino
2
Les fichiers scss générés sont nommés .css.scss par défaut, aucune merde du lit ne s'est encore produite
Adrian Macneil
2
Pour une raison quelconque, image-url ne fonctionnait pas pour moi, mais asset-url ('myimage.png', image) fonctionnait parfaitement. (Rails 3.1)
Elad
1
Au cas où une personne effectuant une mise à niveau à partir de la 3.0 se poserait la question, vous pouvez simplement renommer vos feuilles de style de .cssà .css.erb(après les avoir déplacées app/assetspour obtenir le traitement erb sans sass.
William Denniss
22

Pour ce que ça vaut, quand j'ai fait cela, j'ai trouvé qu'aucun dossier ne devrait être inclus dans le chemin du fichier css. Par exemple, si je l'ai app/assets/images/example.png, et je mets cela dans mon fichier css ...

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

... alors en quelque sorte cela fonctionne comme par magie. Je me suis dit cela en exécutant la rake assets:precompiletâche, qui aspire tout simplement hors de tous vos chemins de charge et décharges dans un dossier de tiroir d'ordure: public/assets. C'est ironique, IMO ...

Dans tous les cas, cela signifie que vous n'avez pas besoin de mettre de chemins de dossier, tout ce qui se trouve dans vos dossiers d'actifs finira par vivre dans un énorme répertoire. La manière dont ce système résout les conflits de noms de fichiers n'est pas claire, vous devrez peut-être faire attention à cela.

Un peu frustrant, il n'y a pas de meilleurs documents pour ce grand changement.

Andrew
la source
3
En cas de conflit de noms, le premier chemin qui apparaît dans le tableau config.assets.paths est le fichier choisi. Cela peut être évité en utilisant l' asset_path()assistant et en spécifiant le répertoire.
Joseph Ravenwolfe
6
Cela "fonctionne comme par magie" car le fichier css et les images sont au même endroit. Les références de fichier CSS sont relatives à l'emplacement du fichier css.
Bill Leeper
Le pipeline d'actifs peut être un peu une boîte noire, en particulier pour les développeurs frontaux, mais il offre de nombreuses fonctionnalités intéressantes comme ne pas avoir à se soucier des chemins de fichiers et du contournement automatique du cache.
Miles
16

Dans rails 4, vous pouvez maintenant utiliser une image-url d'aide css et sass: 

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

Si vos images d'arrière-plan ne s'affichent pas, envisagez de voir comment vous les référencez dans vos feuilles de style.

lflores
la source
1
C'est correct (pour les rails 4). Votez cette réponse!
ahnbizcad
Rails «vous aide» en insérant le mot-clé url ainsi que la chaîne. Cela signifie que vous pouvez faire des choses comme. div.logo {background: image-url("logo.png") no-repeat center;}
Antony Denyer
10

lors du référencement d'images en CSS ou dans une balise IMG, utilisez image-name.jpg

alors que l'image est vraiment située sous ./assets/images/image-name.jpg

Tilo
la source
Je pense que c'est faux en ce qui concerne CSS - l'utilisation des rails 3.1.0.rc4 lorsque je l'utilise background: url('sort_asc_disabled.png')fonctionne pour le fichier app / assets / images / sort_asc_disabled.png.
wonderfulthunk
2

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

Ce railscast (tutoriel sur les rails vidéo sur le pipeline d'actifs) aide également beaucoup à expliquer les chemins dans le pipeline d'actifs. Je l'ai trouvé assez utile et je l'ai regardé plusieurs fois.

La solution que j'ai choisie est celle de @Lee McAlilly ci-dessus, mais ce railcast m'a aidé à comprendre pourquoi cela fonctionne. J'espère que ça aide!

botbot
la source
0

Le pipeline d'actifs dans les rails offre une méthode pour cette chose exacte.

Vous ajoutez simplement image_path ('image filename') à votre fichier css ou scss et rails s'occupe de tout. Par exemple:

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

(notez que cela fonctionne comme dans une vue .erb, et que vous n'utilisez pas "/ assets" ou "/ assets / images" dans le chemin)

Rails propose également d'autres méthodes d'assistance, et il y a une autre réponse ici: Comment utiliser des images de référence dans Sass lorsque j'utilise Rails 3.1?

Benrugg
la source
Je sais que cette question date de quelques années, mais c'était la première page que j'ai trouvée sur google lors de la recherche, donc ce serait génial de sélectionner une réponse pour que les autres puissent facilement la référencer!
benrugg