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

Question

Sommes-nous censés utiliser quelque chose d'autre à part image-url et les autres dans les Rails 4? Ils retournent des valeurs différentes qui ne font pas de sens. Si j'ai logo.png en /app/assets/images/logo.png et je fais ce qui suit, c'est ce que j'obtiens:

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 travaux parce qu'ils ont besoin d'au moins /assets à l'avant.

Mise à JOUR: en Fait, je viens de remarquer, comment puis-je accéder aux images dans les Rails 4? J'ai une image à l' /app/assets/images/logo.png. Mais si je vais à l'une des Url suivantes, je n'ai toujours pas voir 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 que je peux apporter mon logo.png est en le déplaçant dans l' /app/assets/stylesheets directory, puis tirer vers le haut:

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

Answer 1

J'ai juste eu ce problème moi-même. 3 points qui nous l'espérons vous aider:

• Si vous êtes de placer des images dans votre app/assets/images répertoire, alors vous devriez être en mesure d'appeler l'image directement avec aucun préfixe dans le chemin d'accès. 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 un background-image: de la propriété, puis votre ligne de code doit être background-image: image-url('logo.png'). Cela fonctionne pour les deux moins et sass les feuilles de style. Si vous l'utilisez en ligne dans la vue, puis vous aurez besoin d'utiliser le construit en image_tag helper dans les rails de sortie de votre image. Encore une fois, pas de préfixation <%= image_tag 'logo.png' %>
• Enfin, si vous êtes à la précompilation de vos actifs, exécutez rake assets:precompile pour générer vos biens, ou rake assets:precompile RAILS_ENV=production de la production, autrement, votre environnement de production n'aura pas les empreintes digitales de l'actif lors du chargement de la page.

Aussi pour ces commandes, point 3, vous aurez besoin de les préfixer avec bundle exec si vous exécutez bundler.

Answer 2

Votre première formulation, image-url('logo.png'), est correcte. Si l'image est trouvé, il va générer le chemin de /assets/logo.png (plus d'un hachage de la production). Toutefois, si les Rails ne peut pas trouver l'image que vous avez nommé, il va retomber /images/logo.png.

La prochaine question est: pourquoi n'est-il pas de Rails de trouver votre image? Si vous le mettez dans le dossier app/assets/images/logo.png, alors vous devriez être en mesure d'y accéder en allant à l' http://localhost:3000/assets/logo.png.

Si cela fonctionne, mais votre CSS n'est pas mise à jour, vous devrez peut-être effacer le cache. Supprimer tmp/cache/assets à partir de votre répertoire de projet et redémarrez le serveur (webrick, etc.).

Si cela échoue, vous pouvez également essayer d'utiliser simplement des background-image: url(logo.png); Qui sera la cause de votre CSS pour rechercher des fichiers avec le même chemin d'accès relatif (qui dans ce cas est à l'actif).

Answer 3

Bonjour, je viens de découvrir qu’en utilisant asset-url helper, vous résolvez ce problème. asset-url ("backgrounds / pattern.png", image)

Answer 4

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

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