web-dev-qa-db-fra.com

Rails 4 les chemins image, url d'image et url de ressources ne fonctionnent plus dans les fichiers SCSS

Sommes-nous censés utiliser autre chose que image-url et d'autres dans Rails 4? Ils renvoient des valeurs différentes qui ne semblent pas avoir de sens. Si j'ai logo.png dans /app/assets/images/logo.png et que je fais ce qui suit, voici ce que je reçois:

image-url("logo.png") -> url("/images/logo.png") #obviously doesn't work
image-path("logo.png") -> "/images/logo.png"
asset-url("logo.png") -> url("/logo.png")

Bien sûr, aucune de ces méthodes ne fonctionne car elles ont besoin d’au moins /assets devant.

UPDATE: En fait, je viens de remarquer comment puis-je accéder aux images dans Rails 4? J'ai une image sur /app/assets/images/logo.png. Mais si je vais à l'une des URL suivantes, je ne vois toujours pas mon image:

http://localhost:3000/assets/logo.png
http://localhost:3000/assets/images/logo.png
http://localhost:3000/logo.png
http://localhost:3000/images/logo.png

PDATE 2: Le seul moyen de faire apparaître mon logo.png consiste à le déplacer dans le /app/assets/stylesheets répertoire puis en remontant:

http://localhost:3000/assets/logo.png
ruby-on-railsasset-pipelineruby-on-rails-4
95
at.

Je viens d'avoir ce problème moi-même. 3 points qui, espérons-le, aideront:

  • Si vous placez des images dans votre répertoire app/assets/images, vous devriez pouvoir appeler l'image directement sans préfixe dans le chemin. c'est à dire. image_url('logo.png')
  • Selon l'endroit où vous utilisez l'actif dépend de la méthode. Si vous l'utilisez en tant que propriété background-image:, votre ligne de code doit alors être background-image: image-url('logo.png'). Cela fonctionne pour les styles moins et sass. Si vous l'utilisez en ligne dans la vue, vous devrez utiliser l'aide intégrée image_tag dans Rails pour générer votre image. Encore une fois, pas de préfixe <%= image_tag 'logo.png' %>
  • Enfin, si vous pré-compilez vos ressources, exécutez rake assets:precompile pour générer vos ressources ou rake assets:precompile Rails_ENV=production pour la production. Sinon, votre environnement de production ne disposera pas des ressources avec empreintes digitales lors du chargement de la page.

De même, pour les commandes du point 3, vous devrez les préfixer avec bundle exec si vous utilisez bundler.

107
cdaloisio

Votre première formulation, image_url('logo.png'), est correcte. Si l'image est trouvée, elle générera le chemin /assets/logo.png (plus un hachage en production). Cependant, si Rails ne peut pas trouver l'image que vous avez nommée, elle retombera sur /images/logo.png.

La question suivante est la suivante: pourquoi Rails ne trouve-t-il pas votre image? Si vous le mettez dans app/assets/images/logo.png, vous devriez pouvoir y accéder en allant sur http://localhost:3000/assets/logo.png.

Si cela fonctionne, mais que votre CSS ne se met pas à jour, vous devrez peut-être effacer le cache. Supprimez tmp/cache/assets de votre répertoire de projet et redémarrez le serveur (webrick, etc.).

Si cela échoue, vous pouvez également essayer simplement d'utiliser background-image: url(logo.png);. Cela obligera votre CSS à rechercher des fichiers avec le même chemin relatif (qui, dans ce cas, est/assets).

61
Nick Urban

Je viens de découvrir qu'en utilisant asset_url helper, vous résolvez ce problème.

asset_url("backgrounds/pattern.png", image)
8
Leftis

J'ai eu un problème similaire, en essayant d'ajouter une image de fond avec des CSS en ligne. Il n'est pas nécessaire de spécifier le dossier d'images en raison de la manière dont la synchronisation des actifs fonctionne.

Cela a fonctionné pour moi:

background-image: url('/assets/image.jpg');
7
ykwx

Rails 4.0.0 ressemblera à une image définie avec image-url dans la même structure de répertoires que votre fichier css.

Par exemple, si votre css dans assets/stylesheets/main.css.scss, image-url('logo.png') devient url(/assets/logo.png).

Si vous déplacez votre fichier CSS vers assets/stylesheets/cpanel/main.css.scss, image-url('logo.png') devient /assets/cpanel/logo.png.

Si vous souhaitez utiliser l'image directement dans le répertoire assets/images, vous pouvez utiliser asset-url('logo.png')

4
kuntoaji

pour les feuilles de style: url (asset_path ('image.jpg'))

3
user2586863