[RUBY] [Rails] Comment afficher les images dans la vue

Ceci est le premier message. Je pense qu'il y a des points qui ne peuvent être atteints, alors j'apprécierais que vous puissiez veiller avec des yeux chaleureux ...

J'ai eu beaucoup de problèmes avec la façon d'afficher des images dans Rails, donc je l'ai enregistré comme mémo. Voyons maintenant!

• Décrit en haml / scss.

Comment afficher une image Tout d'abord, comment afficher l'image sur le standard. Il semble être affiché indépendamment du fait qu'il soit écrit en haml ou scss. Je pense que la bonne réponse est celle à écrire.

Comme impression personnelle, lorsque vous souhaitez utiliser une image comme arrière-plan, Par exemple, lorsque vous souhaitez afficher des informations textuelles sur une image. Dans un tel cas, il vaut mieux le décrire en scss comme une image de fond. Je ne comprends pas vraiment la différence ici, donc si vous pouvez comprendre la différence, apprenez-moi s'il vous plaît: froncer les sourcils2:

Tout d'abord, il doit y avoir une image à afficher. app/assets/images Stockez l'image que vous souhaitez afficher dans ce répertoire et vous êtes prêt à partir.

Lors de l'écriture en haml

nom de fichier.html.haml

= image_tag ("Nom de l'image.jpg ")

Je ne peux pas encore l'afficher. Il ne s'affichera que si vous définissez la largeur et la hauteur. Dans un tel cas, il est nécessaire d'écrire une description pour organiser l'image en scss.

_nom de fichier.scss

        img {
          width: 100%;
          height: 100%;
        }

Comme ceci, si vous spécifiez largeur: 100%; et hauteur: 100%;, il sera affiché en toute sécurité. Dans ce cas, c'est "%", mais "px" est également possible! Lors de l'écriture en haml, "= image_tag" est essentiel.

Lors de l'écriture en scss

_nom de fichier.scss

.nom de la classe{
  height: 560px;
  width: 100%;
  background-image: image-url("nom de fichier.jpg ");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

Vous pouvez l'afficher en l'écrivant comme ceci. Si vous n'écrivez pas la taille de l'arrière-plan ou les propriétés autour de lui, L'image sera "Baaaaaaaaa". (Misère) Après cela, vous devez également définir la largeur et la hauteur. Vous devez sélectionner la propriété qui correspond à l'image que vous souhaitez implémenter.

L'image n'est pas affichée uniquement dans l'environnement de production Il est affiché dans l'environnement local, mais il n'est pas affiché dans l'environnement de production ... Il y a des moments où.

Cliquez ici pour le code lorsqu'il ne peut pas être affiché

_nom de fichier.scss

.nom de la classe{
  height: 560px;
  width: 100%;
  background-image: url("nom de fichier.jpg ");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

Qu'est-ce qui est différent du code ci-dessus

_nom de fichier.scss

.nom de la classe{
  background-image: url("nom de fichier.jpg ");
}

C'est la partie. Avec cette méthode d'écriture, il peut être affiché localement, mais il n'est pas affiché en production.

_nom de fichier.scss

.nom de la classe{
  background-image: image-url("nom de fichier.jpg ");
}

En le modifiant de cette manière, il peut être affiché à la fois en production et en local.

Comment afficher les images dans la base de données Par exemple, lorsque vous enregistrez un produit, vous pouvez également enregistrer une image. Je veux afficher l'image enregistrée! !! C'est la méthode pour un tel cas.

◇ Condition 1 ◇ Lors de l'enregistrement de l'image dans un tableau séparé La raison de l'enregistrement dans une table séparée est d'enregistrer plusieurs images. Si vous souhaitez n'en enregistrer qu'un seul, je pense qu'il est nécessaire de séparer les tableaux.

Nom du contrôleur.rb

  def index
    @items = Item.includes(:item_images).order("created_at DESC").limit(5)
  end

Obtenez des informations comme celle-ci. item_images est l'endroit où les images sont stockées.

nom de fichier.html.haml

- @items.each do |item| #Développez avec chacun
　= image_tag item.item_images[0].image.url

_nom de fichier.scss

        img {
          width: 100%;
          height: 100%;
        }

Je pourrais l'afficher en écrivant comme ça. Pour être honnête, la description est très longue ... Une telle impression [0] → Il semble que les images sont stockées dans un tableau, vous devez donc spécifier le nombre d'images.

◇ Condition 2 ◇ Lorsque l'image n'est pas enregistrée dans une autre table Il sera décrit dans html.erb.

Nom du contrôleur.rb

  def index
    @items = Item.order("created_at DESC").page(params[:page]).per(5)
  end

Obtenez des informations comme celle-ci.

nom de fichier.html.erb

<% @items.each do |item| %>
　<%= image_tag item.image.to_s, :size =>'220x220'%>

J'ai spécifié la taille dans le fichier name.html.erb. Vous pouvez maintenant voir: clap:

S'il existe une autre façon de l'afficher, apprenez-moi s'il vous plaît: