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?

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")

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

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");

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

 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 simplement ajouter / assets / dans la méthode url

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

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 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"

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

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');

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

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") })");

Cela devrait vous y amener à chaque fois.

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

Par défaut, Rails 4 ne servira pas vos ressources. Pour activer cette fonctionnalité, vous devez aller dans config / application.rb et ajouter 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"); }

Vous pouvez ajouter à 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;