Rails : Comment référencer des images en CSS dans Rails 4

Question

Il y a un problème étrange avec Rails 4 sur Heroku. Lorsque les images sont compilées, des hashs leur sont ajoutés, mais les références à ces fichiers dans CSS n'ont pas le bon nom ajusté. Voici ce que je veux dire. J'ai un fichier appelé logo.png. Pourtant, lorsqu'il apparaît sur Heroku, il est affiché comme suit :

/assets/logo-200a00a193ed5e297bb09ddd96afb953.png

Cependant, le CSS indique toujours :

background-image:url("./logo.png");

Résultat : l'image ne s'affiche pas. Quelqu'un a rencontré ce problème ? Comment le résoudre ?

Answer 1

Sprockets avec Sass a quelques aides astucieuses que vous pouvez utiliser pour faire le travail. Les pignons uniquement traiter ces aides si les extensions de votre fichier de feuille de style sont soit .css.scss o .css.sass .

---

Aide spécifique à l'image :

background-image: image-url("logo.png")

---

Aide agnostique :

background-image: asset-url("logo.png", image)
background-image: asset-url($asset, $asset-type)

---

Ou si vous voulez intégrer les données de l'image dans le fichier css :

background-image: asset-data-url("logo.png")

Answer 2

Je ne sais pas pourquoi, mais la seule chose qui a marché pour moi était d'utiliser chemin_de_l'actif au lieu de de chemin_image même si mes images sont sous le nom de assets/images/ répertoire :

Ejemplo:

app/assets/images/mypic.png

En Ruby :

asset_path('mypic.png')

En .scss :

url(asset-path('mypic.png'))

---

UPDATE :

J'ai compris - il s'avère que ces aides à l'immobilisation proviennent de l' sass-rails (que j'avais installé dans mon projet).

Answer 3

Dans Rails 4, vous pouvez faire référence à une image située dans le dossier assets/images/ dans votre .SCSS des fichiers facilement comme ceci :

.some-div {
  background-image: url(image-path('pretty-background-image.jpg'));
}

---

Lorsque vous lancez l'application en mode développement ( localhost:3000 ), vous devriez voir quelque chose comme :

background-image: url("/assets/pretty-background-image.jpg");

En mode production, vos actifs auront les numéros d'aide de cache :

background-image: url("/assets/pretty-background-image-8b313354987c309e3cd76eabdb376c1e.jpg");

Answer 4

Le hachage est dû au fait que le pipeline d'actifs et le serveur optimisent la mise en cache. http://guides.rubyonrails.org/asset_pipeline.html

Essayez quelque chose comme ça :

 background-image: url(image_path('check.png'));

Goodluck

Answer 5

En css

background: url("/assets/banner.jpg");

bien que le chemin original soit /assets/images/banner.jpg, par convention vous devez ajouter juste /assets/ dans la méthode url