Rails 4 image-path, image-url et asset-url ne fonctionnent plus dans les fichiers SCSS

99

Sommes-nous censés utiliser autre chose que d' image-urlautres dans Rails 4? Ils renvoient des valeurs différentes qui ne semblent pas avoir de sens. Si je dois logo.pngen /app/assets/images/logo.pnget 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, aucun de ceux-ci ne fonctionne car ils ont besoin d'au moins /assetsdevant.

MISE À JOUR : En fait, je viens de remarquer, comment accéder aux images dans Rails 4? J'ai une image à/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

MISE À JOUR 2 : La seule façon dont je peux afficher monlogo.pngest de le déplacer dans le/app/assets/stylesheetsrépertoire, puis de tirer vers le haut:

http://localhost:3000/assets/logo.png
ruby-on-rails asset-pipeline ruby-on-rails-4 à.
la source
Essayez ceci:asset_path("logo.png", image)
Marcelo De Polli
@depa - qui est simplement converti en "/logo.png", ce qui ne fait pas apparaître mon image.
à.
3
Utilisez-vous cet assistant dans un .cssfichier ou dans un .css.scssfichier?
Marcelo De Polli
@depa - n'utilise aucun assistant. Je pense que c'est un plus gros problème d'actifs qui ne fonctionnent tout simplement pas pour mon dossier d'images
à.
1
@depa - oh je vois ce que vous demandez. C'est dans un .css.scssfichier
à.

Réponses:

113

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

  • Si vous placez des images dans votre app/assets/images répertoire, 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épendra de la méthode. Si vous l'utilisez comme background-image:propriété, votre ligne de code devrait être background-image: image-url('logo.png'). Cela fonctionne pour les feuilles de style moins et sass. Si vous l'utilisez en ligne dans la vue, vous devrez utiliser l' image_tagassistant intégré dans les rails pour générer votre image. Encore une fois, pas de préfixe<%= image_tag 'logo.png' %>
  • Enfin, si vous précompilez vos actifs, exécutez rake assets:precompilepour générer vos actifs ou rake assets:precompile RAILS_ENV=productionpour la production, sinon, votre environnement de production n'aura pas les actifs d'empreintes digitales lors du chargement de la page.

Pour ces commandes au point 3, vous devrez également les préfixer bundle execsi vous exécutez bundler.

cdaloisio
la source
1
Un autre point est de lire la documentation guides.rubyonrails.org/asset_pipeline.html . Pouvez-vous également voir dans le débogage des développeurs Web de votre navigateur si les images sont en cours de chargement?
H.Rabiee
3
Maintenant, voici comment vous écrivez une réponse. Chaque scénario. Prédire les «et si», pas de détails. Une marque de quelqu'un qui a "vu le combat" (a vraiment résolu le problème).
ahnbizcad
J'ai été mordu par le manque RAILS_ENV = production à plusieurs reprises.
Sixty4Bit
62

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 parvient pas à trouver l'image que vous avez nommée, elle reviendra /images/logo.png.

La question suivante est: 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 accédant à http://localhost:3000/assets/logo.png.

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

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

Nick Urbain
la source
2
Juste pour sauter là-dessus, j'ai été mordu en utilisant des guillemets doubles sur le chemin de l'image au lieu de guillemets simples. Vous utilisez souvent des guillemets simples avec les assistants d'actifs dans les fichiers css / scss.
d_ethier
je reçois "une variable locale ou une méthode non définie" image ""
Muhammad Umer
Est-il possible que vous ayez accidentellement mis un espace avant le mot image?
Nick Urban
10

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

asset_url("backgrounds/pattern.png", image)
Leftis
la source
J'ai eu une undefined local variable or method 'image'erreur.
Penguin
Peut-être que quelque chose a changé sur les rails, cette réponse est ancienne! Vous pouvez essayerasset_path("<your_path>", type: :image)
Leftis
8

J'ai eu un problème similaire en essayant d'ajouter une image d'arrière-plan avec css en ligne. Inutile de spécifier le dossier images en raison du fonctionnement de la synchronisation des ressources.

Cela a fonctionné pour moi:

background-image: url('/assets/image.jpg');
ykwx
la source
Merci, je faisais assets/img.jpgou ../assets/img.jpgqui ne fonctionne évidemment dans aucun répertoire. /assets/img.jpgEst-ce que. TY
ElliotM
5

Rails 4.0.0 ressemblera à l'image définie avec image-urldans la même structure de répertoires que votre fichier css.

Par exemple, si votre css est entré 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 sous le répertoire assets / images, vous pouvez utiliser asset-url('logo.png')

kuntoaji
la source
5

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

user2586863
la source
3
Quelle est la principale différence entre url(asset_path('image.jpg'), url('image.jpg')et image-url('image.jpg')? Je travaille avec Rails 5.0.0.1 et url()fonctionne très bien dans SCSS fichiers et html.erb fichiers j'utiliser asset_path()donc je voudrais savoir la bonne façon d'aller. Merci d'avance.
alexventuraio
asset_pathajouter au fichier image une annexe de résumé. C'est en fait pour la production, après chaque déploiement, l'annexe a digest sera modifiée et le navigateur de l'utilisateur téléchargera une nouvelle version des images.
Alex Kojin