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


205

Il y a un problème étrange avec Rails 4 sur Heroku. Lorsque les images sont compilées, des hachages leur sont ajoutés, mais la référence à ces fichiers depuis CSS n'a pas le nom correct ajusté. Voici ce que je veux dire. J'ai un fichier appelé logo.png. Pourtant, quand il apparaît sur Heroku, il est considéré comme:

/assets/logo-200a00a193ed5e297bb09ddd96afb953.png

Cependant, le CSS déclare toujours:

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

Résultat: l'image ne s'affiche pas. Quelqu'un a rencontré ça? Comment cela peut-il être résolu?


1
Juste pour info, Heroku a confirmé qu'il s'agit d'un bug ... ils travaillent sur une solution
Nick ONeill

Pouvez-vous donner une mise à jour à ce sujet? J'ai le même problème
Minh Danh

Réponses:


392

Sprockets et Sass ont quelques aides utiles que vous pouvez utiliser pour faire le travail. Sprockets ne traitera ces assistants que si les extensions de fichier de votre feuille de style sont soit .css.scssou .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 souhaitez incorporer les données d'image dans le fichier css:

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

21
asset-data-urlfonctionne pour moi après avoir changé mon fichier .css en fichier .css.scss dans une application Rails 4. Merci!
fatman13

@ fatman13 Oui, cela ne fonctionne qu'avec les fichiers .scss et .sass pour autant que je sache.
zeeraw

Jeff: Les autres fonctionnent, à condition que vos options d'URL d'actif soient correctement configurées. Il ne s'applique pas asset-data-urlcar il intègre tout le fichier dans la feuille de style.
Zeeraw

1
Semblable à @ fatman13 depuis que j'utilisais, sass-railsj'ai finalement ajouté l'extension du fichier .scssaux fichiers .css incriminés afin qu'ils se terminent tous .css.scss, puis j'ai remplacé toutes les instances de url('blah.png')with url(asset-path('blah.png'))(dans mon cas, tous les blah.pngs étaient dans un /vendored dossier).
likethesky

asset-url($asset)devrait être utilisé pour les pignons 3, la version avec $asset-typefonctionne probablement avec une ancienne version
prusswan

59

Je ne sais pas pourquoi, mais la seule chose qui a fonctionné pour moi était d'utiliser asset_path au lieu de image_path , même si mes images se trouvent dans le répertoire assets / images / :

Exemple:

app/assets/images/mypic.png

En rubis:

asset_path('mypic.png')

En .scss:

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

METTRE À JOUR:

Je me suis rendu compte que ces aides-ressources provenaient du joyau sass-rails (que j'avais installé dans mon projet).


2
fonctionne pour moi, vraiment très bonne solution de voie de rails. Merci @Yarin
AMIC MING

1
Oui! Après plusieurs heures à me cogner la tête contre le mur, votre solution "asset-path" a finalement fonctionné pour moi sur mon fichier .css.scss! background-image: url(asset-path('off.png'))
Raymond Gan

36

Dans Rails 4, vous pouvez facilement référencer une image située assets/images/dans vos .SCSSfichiers 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");

1
@MikeLyons: Je viens de le tester sur un tout nouveau projet Rails 4.1 et de le déployer sur Heroku et ça fonctionne bien pour moi. Vous devez avoir touché quelque chose production.rb.
sergserg


11

En CSS

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

bien que le chemin d'origine soit /assets/images/banner.jpg, par convention, vous devez simplement ajouter / assets / dans la méthode url


1
En utilisant CSS ol simple, je pensais que je devenais fou - merci!
Craig McGuff

2
cela ne sera pas compilé en production
dimitry_n

Wow, merci, ce n'est pas très intuitif. Donc je suppose que tous les actifs dans les chemins d'actifs ( vendor/assets, app/assets, lib/assets, etc.) sont combinées en un seul dossier actif après est complet avenant?
ohhh

Cela ne fonctionnera pas dans Production car dans Production, vos ressources sont compilées avec un hachage MD5 apposé à la fin du nom et, avec des paramètres typiques, /assets/banner.jpgne fonctionneront pas. Au lieu de cela, ce sera quelque chose comme /assets/banner-f719451f1e0ddd15f153c4eedde044b2.jpg. TL; DR Ne l'utilisez pas.
Joshua Pinter

10

Aucune des réponses ne dit comment, quand j'aurai une .css.erbextension, comment référencer les images . Pour moi, j'ai travaillé aussi bien en production qu'en développement :

2.3.1 CSS et ERB

Le pipeline d'actifs évalue automatiquement ERB . Cela signifie que si vous ajoutez une extension erb à un actif CSS (par exemple, application.css.erb), des aides comme asset_pathsont disponibles dans vos règles CSS:

.class { background-image: url(<%= asset_path 'image.png' %>) }

Cela écrit le chemin d'accès à l'actif particulier référencé. Dans cet exemple, il serait logique d'avoir une image dans l'un des chemins de chargement d'actifs, tel que app/assets/images/image.png, qui serait référencé ici. Si cette image est déjà disponible enpublic/assets tant que fichier d'empreintes digitales, ce chemin est référencé.

Si vous souhaitez utiliser un URI de données - une méthode d'intégration des données d'image directement dans le fichier CSS - vous pouvez utiliser l' asset_data_uriaide.

.logo { background: url(<%= asset_data_uri 'logo.png' %>) }

Cela insère un URI de données correctement formaté dans la source CSS.

Notez que la balise de fermeture ne peut pas être du style -%>.


5

Seul cet extrait ne fonctionne pas pour moi:

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

Mais renommer stylename.scss en stylename.css.scss m'aide.


4

Référencement des documents Rails nous constatons qu'il existe plusieurs façons de créer des liens vers des images de CSS. Allez simplement à la section 2.3.2.

Tout d'abord, assurez-vous que votre fichier css a l'extension .scss s'il s'agit d'un fichier sass.

Ensuite, vous pouvez utiliser la méthode ruby, qui est vraiment moche:

#logo { background: url(<%= asset_data_uri 'logo.png' %>) }

Ou vous pouvez utiliser le formulaire spécifique qui est plus agréable:

image-url("rails.png") returns url(/assets/rails.png)
image-path("rails.png") returns "/assets/rails.png"

Enfin, vous pouvez utiliser le formulaire général:

asset-url("rails.png") returns url(/assets/rails.png)
asset-path("rails.png") returns "/assets/rails.png"

3

CE QUE J'AI TROUVÉ APRÈS DES HEURES DE MUCKING AVEC CELA:

TRAVAUX :

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

// how to add attributes like repeat, center, fixed?

Ce qui précède génère quelque chose comme: "/assets/transparent_2x2-ec47061dbe4fb88d51ae1e7f41a146db.png"

Remarquez le "/" , et il est entre guillemets . Notez également l' extension scss et l'assistant image_path dans yourstylesheet.css.scss. L'image se trouve dans le répertoire app / assets / images .

Ne fonctionne pas:

background: url(image_path('transparent_2x2.png') repeat center center fixed;

ne fonctionne pas, propriété invalide:

background:url(/assets/pretty_photo/default/sprite.png) 2px 1px repeat center fixed;

Mon dernier recours allait être de les mettre dans mon seau public s3 et de les charger à partir de là, mais finalement, quelque chose s'est passé.


Pour toute personne venant ici et ayant toujours des problèmes: assurez-vous que votre fichier css est mis à jour et que vous n'avez pas précompilé vos actifs localement et que vous avez oublié de les mettre à jour.
Hartwig

Hartwig - qu'est-ce que cela signifie? Voulez-vous dire que vous devez réexécuter la précompilation avant que cette méthode ne fonctionne? J'ai tout essayé sur ce post (tout) et rien ne fonctionne pour moi
Mel

2

Fait intéressant, si j'utilise «background-image», cela ne fonctionne pas:

background-image: url('picture.png');

Mais juste «arrière-plan», cela fait:

background: url('picture.png');

mais cela ne fonctionne qu'à partir du fichier scss, pas lorsqu'il est placé dans une affectation de propriété de style dans un div ... je suis confus
AnderSon


1

Lors de l'utilisation de gem 'sass-rails', dans Rails 5, bootstrap 4, ce qui suit a fonctionné pour moi,

dans le fichier .scss:

    background-image: url(asset_path("black_left_arrow.svg"));

dans le fichier de vue (par exemple .html.slim):

    style=("background-image: url(#{ show_image_path("event_background.png") })");

0

Cela devrait vous y amener à chaque fois.

background-image: url(<%= asset_data_uri 'transparent_2x2.png'%>);


0

Dans Rails 4, utilisez simplement

.hero { background-image: url("picture.jpg"); }

dans votre fichier style.css tant que l'image d'arrière-plan est cachée dans app / assets / images.


Lire la question en entier
Adriano Resende

0

Vous pouvez ajouter à votre extension css .erb. Ej: style.css.erb

Ensuite, vous pouvez mettre:

background: url(<%= asset_path 'logo.png' %>) no-repeat;

0

Cela a fonctionné pour moi:

background: #4C2516 url('imagename.png') repeat-y 0 0;
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.