[RUBY] [Rails] À propos de l'erreur selon laquelle l'image n'est pas affichée dans l'environnement de production

introduction

Que faire lorsque l'image est affichée fermement dans l'environnement local, mais que l'image disparaît lorsqu'elle est déployée dans l'environnement de production.

environnement

・ Rails 6.0.3. ・ Haml

Statut

Comme le montre la notation ci-dessous, l'image a été spécifiée comme chemin en utilisant la méthode d'assistance Rails ʻimage_tag`, et elle était bien affichée dans l'environnement local.

= image_tag "assets/material/icon/icon.png "

Cependant, lorsque je l'ai déployé, l'image a disparu. (Bien que cette notation soit également suspecte)

Bien entendu, l '"image de fond" décrite dans le fichier "scss" n'était pas non plus listée (cette correspondance est décrite en bas).

Cause

Dans un environnement de production, les images seront également compilées, les noms des fichiers image changeront et les répertoires changeront!

La différence entre l'environnement de production et l'environnement local est Le chemin change (app / assets / images / icon.png => /assets/icon.png) Le nom change (icon.png => icon-xxx… .png) * xxx… est digest Cela va changer!

Contre-mesures

Utilisez l'option Rails appelée ʻassets_path ()`. Ceci est pratique et peut être déployé dans l'environnement de production, et même si le nom du fichier ou du répertoire change, il peut être géré localement ou en production avec celui-ci!

Plus précisément, modifiez comme suit

= image_tag asset_path("assets/material/icon/icon.png ")

Je pense que cela fonctionnera ... Il n'est plus affiché même dans l'environnement local. .. .. ..

Le résultat est le même même si vous déployez avec une mauvaise source (naturellement)

Pourquoi asset_path ne fonctionne pas

L'option ʻasset_path correspond aux fichiers directement sous ʻapp / assets / images, mais apparemment elle ne correspond pas aux fichiers dans le répertoire au-delà.

Correspondance

Toutes les images gérées dans le répertoire ont été déplacées directement sous ʻapp / assets / images`, et la notation a été corrigée comme suit.

= image_tag asset_path("icon.png ")

Maintenant, quand je le déploie, l'image est enfin affichée! !!

En résumé, la solution était d'utiliser l'option ʻasset_path et de placer le fichier image directement sous ʻimages.

[scss] À propos de l'image d'arrière-plan

Encore une fois, le simple fait de spécifier le chemin du fichier image comme indiqué ci-dessous ne fonctionnait pas.

background-image: url("main-image.jpg ");

Correspondance

Avec ʻimage-url`, cela fonctionne à la fois localement et en production.

background-image:image-url("main-image.jpg ");

Vous pouvez le gérer en l'écrivant comme ceci. Bien sûr, spécifiez l'image directement sous ʻapp / assets / images`

Il est important de noter ici qu'il n'y a pas d'espace après le «: (deux-points)». La description de SCSS était addictive car elle était écrite avec un espace demi-largeur après les deux points. Je n'ai donc pas pu trouver la cause sans savoir que c'était faux.

Maintenant, lorsque je le déploie, l'image s'affiche normalement! !!