[RUBY] Fortsetzung ・ Ablauf zur Implementierung der Image-Posting-Funktion mit ActiveStorage

Einführung

Erläuterung von der Bildspeicherung zur Anzeige mit Active Storage. In meinem letzten Beitrag habe ich erklärt, wie Active Storage installiert wird.

Link ↓ Ablauf zum Implementieren der Image-Posting-Funktion mithilfe von ActiveStorage

Übergang vom Speichern eines Bildes zum Anzeigen

1. Definition der Assoziation
2. Erlauben Sie starken Parametern, Bilder zu speichern
3. Generiert als HTML img Element
4. Fehlerbehebung
5. Größenänderung des Bildes
6. Validierungseinstellungen

1. Definition der Assoziation

Verwenden Sie die Methode "has_one_attached", um jeden Datensatz in einer Eins-zu-Eins-Beziehung mit der Bilddatei zu verknüpfen. Beschreiben Sie in der Modelldatei, die Sie verknüpfen möchten

model

Klassenmodell< ApplicationRecord
 has_one_attached :Dateiname
end

Legen Sie für den Dateinamen den Namen beim Aufrufen fest. Es wird auch ein Parameterschlüssel. ex):image, :file etc Als Bild gibt es eine Spalte für den Dateinamen, und es fühlt sich an, als wäre eine angehängte Datei darin. Durch die Herstellung dieser Assoziation, Sie können auf die angehängte Datei mit model name.file name zugreifen.

2. Erlauben Sie starken Parametern, Bilder zu speichern

controllers

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

Verwenden Sie, wie beim Definieren der Zuordnung erwähnt, den Dateinamen für den Parameterschlüssel. Selbst zu diesem Zeitpunkt ist das Bild, das die Spalte erzeugt, anwendbar.

Das Obige ist der Fluss bis zur Lagerung.

Das Folgende ist der Ablauf, bis er angezeigt wird.

3. Generiert als HTML img Element

Generieren Sie ein img-Tag in HTML mit einer Hilfsmethode namens "image_tag method".

html.erb

<%= image_Tag Modellname.Dateiname%>
<%= image_tag message.image %>  #Beispiel

Da es zugeordnet ist, kann das Bild angezeigt werden, indem nur "Modellname.Dateiname" beschrieben wird.

Grundsätzlich kann das Bild bis zu diesem Punkt angezeigt werden. Wenn bei dieser Rate jedoch kein Bild vorhanden ist, tritt ein Fehler auf.

4. Fehlerbehebung

Verzweigen Sie bedingt mit einer if-Anweisung zur vorherigen image_tag-Methode.

html.erb

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

Wenn ein Bild mit der angehängten Methode angehängt wird, gibt es true zurück und wird gelesen. Wenn kein Bild angehängt ist, wird false zurückgegeben, nicht geladen und es tritt kein Fehler auf.

5. Größenänderung des Bildes

Verwenden Sie die "variante Methode", eine Methode, die bei der Installation von ActiveStorage verwendet werden kann. Zusätzlich zum obigen Code

html.erb

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

Wenn Sie die Anzeigegröße des Bildes angeben, wird es nicht größer.

6. Validierungseinstellungen

Wenn Sie sich in der aktuellen Situation LINE vorstellen, wird eine Fehlermeldung angezeigt, wenn Sie nicht sowohl Text als auch Bild haben. Da die Verwendung nicht einfach ist, sollte entweder Text oder Bild vorhanden sein.

model

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

def was_attached?
 self.image.attached?
end

Wenn der Rückgabewert der Methode falsch ist, wird die Validierung überprüft. (Wenn keine Nachricht vorhanden ist)

Schließlich

Es ist zu bequem, um einfach durch Verknüpfen auf Bilder zugreifen zu können! !!