Comment référencer des images en CSS dans Rails 4
Il y a un problème étrange avec Rails 4 sur Heroku. Lorsque les images sont compilées, des hachages sont ajoutés, mais le nom approprié n'est pas ajusté à la référence à ces fichiers dans CSS. Voici ce que je veux dire. J'ai un fichier appelé logo.png. Pourtant, quand il apparaît sur heroku, il est vu comme:
/assets/logo-200a00a193ed5e297bb09ddd96afb953.png
Cependant, le CSS dit toujours:
background-image:url("./logo.png");
Le résultat: l'image ne s'affiche pas. Quelqu'un a couru dans ça? Comment cela peut-il être résolu?
Les pignons avec Sass ont quelques aides astucieux vous pouvez utiliser pour faire le travail. Les sprockets traiteront uniquement ces aides si les extensions de fichier de votre feuille de style sont soit .css.scss, soit .css.sass.
Assistant spécifique à l'image:
background-image: image-url("logo.png")
Assistant 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")
Je ne sais pas pourquoi, mais la seule chose qui a fonctionné pour moi a été d'utiliser asset_path à la place de image_path , même si mes images se trouvent dans le répertoire actifs/images/:
Exemple:
app/assets/images/mypic.png
En Ruby:
asset_path('mypic.png')
En .scss:
url(asset-path('mypic.png'))
UPDATE:
Je me suis dit que ces aides venaient de sass-Rails gem (que j'avais installé 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 de développement (localhost:3000), vous devriez voir quelque chose comme:
background-image: url("/assets/pretty-background-image.jpg");
En mode de production, vos ressources auront les numéros d’assistant de cache:
background-image: url("/assets/pretty-background-image-8b313354987c309e3cd76eabdb376c1e.jpg");
Le hachage provient du pipeline d'actifs et du 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, par convention, vous devez ajouter juste/assets/dans la méthode url
Aucune des réponses n'indique comment, quand j'aurai l'extension .css.erb, comment référencer images. Pour moi, j'ai aussi bien travaillé dans production que développement:
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 assistants tels que asset_path sont disponibles dans vos règles CSS:
.class { background-image: url(<%= asset_path 'image.png' %>) }
Cela écrit le chemin de l'actif particulier référencé. Dans cet exemple, il serait judicieux d’avoir une image dans l’un des chemins de chargement de l’actif, telle que app/assets/images/image.png, qui serait référencée ici. Si cette image est déjà disponible dans public/assets sous forme de fichier à empreinte digitale, alors ce chemin est référencé.
Si vous souhaitez utiliser un URI de données - une méthode d’incorporation directe des données d’image dans le fichier CSS -, vous pouvez utiliser l’aide 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.
Référencement des documents Rails nous voyons qu’il existe plusieurs façons de créer des liens vers des images à partir de CSS. Allez simplement à la section 2.3.2.
Tout d’abord, assurez-vous que votre fichier css porte 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"
CE QUE J’AI TROUVÉ APRÈS DES HEURES DE TAPIS 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"
Notez que les majuscules "/" et sont entre guillemets . Notez également l'extension scss et l'assistance 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 serait de les mettre dans mon seau public s3 et de les charger à partir de là, mais finalement, quelque chose se passait.
Fait intéressant, si j'utilise "background-image", cela ne fonctionne pas:
background-image: url('picture.png');
Mais juste "fond", il 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'%>)}
Vous pouvez ajouter à votre extension css .erb. Ej: style.css.erb
Ensuite, vous pouvez mettre:
background: url(<%= asset_path 'logo.png' %>) no-repeat;
Cela devrait vous y amener à chaque fois.
background-image: url(<%= asset_data_uri 'transparent_2x2.png'%>);
Dans Rails 4, utilisez simplement
.hero {
background-image: url("picture.jpg");
}
Lorsque vous utilisez gem 'sass-Rails', dans Rails 5, bootstrap 4, les éléments suivants ont fonctionné pour moi,
en fichier .scss:
background-image: url(asset_path("black_left_arrow.svg"));
fichier affiché (par exemple .html.slim):
style=("background-image: url(#{ show_image_path("event_background.png") })");
Par défaut, Rails 4 ne servira pas vos actifs. Pour activer cette fonctionnalité, vous devez accéder à config/application.rb et ajouter cette ligne:
config.serve_static_assets = true
https://devcenter.heroku.com/articles/Rails-4-asset-pipeline#serve-assets
Cela a fonctionné pour moi:
background: #4C2516 url('imagename.png') repeat-y 0 0;