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

Il y a un problème étrange avec Rails 4 sur Heroku. Lorsque des images sont compilées, elles sont complétées par des hachages, mais le nom propre à ces fichiers depuis CSS n’est pas 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"); 

Le résultat: l’image ne s’affiche pas. Quelqu’un se heurte à ça? Comment cela peut-il être résolu?

Sprockets avec Sass a quelques aides utiles que vous pouvez utiliser pour faire le travail. Sprockets ne traitera ces assistants que si vos extensions de fichiers de feuilles de style sont soit .css.scss ou .css.sass .


Assistant 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 intégrer les données d’image dans le fichier css:

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

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 Ruby:

 asset_path('mypic.png') 

En .scss:

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

METTRE À JOUR:

Comme cela s’est avéré, ces aides-ressources proviennent de la gemme sass-rails (que j’avais installée dans mon projet).

Dans Rails 4, vous pouvez facilement référencer une image située dans assets/images/ dans vos fichiers .SCSS 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’assistant de cache:

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

Le hachage est dû au pipeline des ressources et au serveur. Optimiser la mise en cache http://guides.rubyonrails.org/asset_pipeline.html

Essayez quelque chose comme ça:

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

Bonne chance

En css

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

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

Aucune des réponses .css.erb comment, lorsque .css.erb extension .css.erb , comment référencer des images . Pour moi a travaillé à la fois dans la production et le développement aussi bien:

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 ), les aides telles que asset_path sont disponibles dans vos règles CSS:

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

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

Si vous voulez utiliser un URI de données – une méthode pour incorporer les données d’image directement dans le fichier CSS – vous pouvez utiliser l’assistant asset_data_uri .

 .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 -%>.

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.

CE QUE J’AI TROUVÉ APRÈS DES HEURES DE MUCING AVEC CE:

TRAVAUX :

 background-image: url(image_path('transparent_2x2.png')); // how to add atsortingbutes like repeat, center, fixed? 

La sortie ci-dessus quelque chose comme: "/assets/transparent_2x2-ec47061dbe4fb88d51ae1e7f41a146db.png"

Notez le “/” , et il est entre guillemets . Notez également l’ extension scss et l’assistant image_path dans votrestylesheet.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é non valide:

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

Mon dernier recours allait être de les mettre dans mon bac public S3 et de les charger à partir de là, mais j’ai finalement obtenu quelque chose.

En référençant les documents Rails, nous voyons qu’il existe plusieurs manières de créer des liens vers des images à partir de CSS. Il suffit d’aller à 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 la forme 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 la forme générale:

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

Fait intéressant, si j’utilise “background-image”, cela ne fonctionne pas:

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

Mais juste “background”, ça fait:

 background: url('picture.png'); 

Dans certains cas, les éléments suivants peuvent également être appliqués

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

Source: http://guides.rubyonrails.org/asset_pipeline.html

Cela devrait vous amener à chaque fois.

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

Par défaut, Rails 4 ne servira pas vos actifs. Pour activer cette fonctionnalité, vous devez aller dans config / application.rb et append cette ligne:

 config.serve_static_assets = true 

https://devcenter.heroku.com/articles/rails-4-asset-pipeline#serve-assets

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.

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

Ensuite, vous pouvez mettre:

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

Cela a fonctionné pour moi:

 background: #4C2516 url('imagename.png') repeat-y 0 0;