[RUBY] Suite ・ Flux pour implémenter la fonction de publication d'image à l'aide d'ActiveStorage

introduction

Explication de l'enregistrement de l'image à l'affichage en utilisant Active Storage. Dans mon dernier article, j'ai expliqué comment installer Active Storage.

Lien ↓ Flux pour implémenter la fonction de publication d'images à l'aide d'ActiveStorage

Flux de l'enregistrement d'une image à son affichage

1. Définition de l'association
2. Autoriser des paramètres forts pour enregistrer les images
3. Généré en tant qu'élément HTML img
4. Résolution d'erreur
5. Redimensionnement de l'image
6. Paramètres de validation

1. Définition de l'association

Utilisez la méthode has_one_attached pour associer chaque enregistrement au fichier image dans une relation un-à-un. Décrivez dans le fichier modèle que vous souhaitez lier

model

modèle de classe< ApplicationRecord
 has_one_attached :nom de fichier
end

Pour le nom du fichier, définissez le nom lors de l'appel. Il devient également une clé de paramètre. ex):image, :file etc En tant qu'image, il y a une colonne pour le nom du fichier, et on a l'impression qu'un fichier joint s'y trouve. En faisant cette association, Vous pouvez accéder au fichier joint avec nom de modèle.nom de fichier.

2. Autoriser des paramètres forts pour enregistrer les images

controllers

 params.require(:message).permit(:text, :image)

Comme mentionné lors de la définition de l'association, utilisez le nom de fichier pour la clé de paramètre. Même à ce moment, l'image que la colonne est formée sera applicable.

Ce qui précède est le flux jusqu'au stockage.

Ce qui suit est le flux jusqu'à ce qu'il s'affiche.

3. Généré en tant qu'élément HTML img

Générez une balise img en HTML en utilisant une méthode d'assistance appelée ʻimage_tag method`.

html.erb

<%= image_nom du modèle de balise.nom de fichier%>
<%= image_tag message.image %>  #Exemple

Puisqu'elle est associée, l'image peut être affichée en décrivant uniquement «nom du modèle.nom du fichier».

Fondamentalement, l'image peut être affichée jusqu'à ce point. Cependant, s'il n'y a pas d'image à ce rythme, une erreur se produit.

4. Résolution d'erreur

Branchez conditionnellement à la méthode précédente ʻimage_tag` avec une instruction if.

html.erb

<%= image_tag message.image, if message.image.attached? %>

Si une image est attachée par la ʻattached? Method`, elle renvoie true et est lue. Si aucune image n'est jointe, elle renvoie false, n'est pas chargée et aucune erreur ne se produit.

5. Redimensionnement de l'image

Utilisez la méthode variante, qui est une méthode qui peut être utilisée lorsque ActiveStorage est installé. En plus du code ci-dessus,

html.erb

<%= image_tag message.image.variant(resize: '500×500'), if message.image.attached? %>

Si vous spécifiez la taille d'affichage de l'image, elle ne sera pas plus grande que cela.

6. Paramètres de validation

Dans la situation actuelle, si vous imaginez LINE, vous obtiendrez une erreur si vous n'avez pas à la fois de texte et d'image. Comme il n'est pas facile à utiliser, la spécification est que le texte ou l'image doit exister.

model

validates :message, presence: true, unless: :was_attacher?

def was_attached?
 self.image.attached?
end

Si la valeur de retour de la méthode est false, la validation est vérifiée. (Si le message n'existe pas)

finalement

C'est trop pratique de pouvoir accéder facilement aux images simplement en les associant! !!