[RUBY] [Schienen] So zeigen Sie Bilder in der Ansicht an

Dies ist der erste Beitrag. Ich denke, es gibt einige Punkte, die nicht erreicht werden können, daher würde ich es begrüßen, wenn Sie mit warmen Augen darüber wachen könnten ...

Ich hatte große Probleme mit der Anzeige von Bildern in Rails, daher habe ich sie als Memo aufgezeichnet. Lass uns jetzt besuchen!

• Beschrieben in haml / scss.

So zeigen Sie ein Bild an Zunächst, wie das Bild auf dem Standard angezeigt wird. Es scheint angezeigt zu werden, unabhängig davon, ob es in haml oder scss geschrieben ist. Ich denke, die richtige Antwort ist, welche man schreibt.

Als persönlicher Eindruck, wenn Sie ein Bild als Hintergrund verwenden möchten, Zum Beispiel, wenn Sie Textinformationen zu einem Bild anzeigen möchten. In einem solchen Fall ist es besser, es in scss als Hintergrundbild zu beschreiben. Ich verstehe den Unterschied hier nicht wirklich. Wenn Sie den Unterschied verstehen können, bringen Sie mir bitte bei: Stirnrunzeln2:

Zunächst muss ein Bild angezeigt werden. app/assets/images Speichern Sie das Bild, das Sie anzeigen möchten, in diesem Verzeichnis und Sie können loslegen.

Beim Schreiben in haml

Dateiname.html.haml

= image_tag ("Bildname.jpg ")

Ich kann es noch nicht anzeigen. Es wird nur angezeigt, wenn Sie die Breite und Höhe eingestellt haben. In einem solchen Fall muss eine Beschreibung geschrieben werden, um das Bild in scss anzuordnen.

_Dateiname.scss

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

Wenn Sie also Breite: 100% und Höhe: 100% angeben, wird dies sicher angezeigt. In diesem Fall ist es "%", aber "px" ist auch möglich! Beim Schreiben in haml ist "= image_tag" unerlässlich.

Beim Schreiben in scss

_Dateiname.scss

.Name der Klasse{
  height: 560px;
  width: 100%;
  background-image: image-url("Dateiname.jpg ");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

Sie können es anzeigen, indem Sie es so schreiben. Wenn Sie keine Hintergrundgröße oder Eigenschaften um sie herum schreiben, Das Bild wird "Baaaaaaaaa" sein. (Elend) Danach müssen Sie auch die Breite und Höhe einstellen. Sie müssen die Eigenschaft auswählen, die dem zu implementierenden Image entspricht.

Das Bild wird nicht nur in der Produktionsumgebung angezeigt Es wird in der lokalen Umgebung angezeigt, aber nicht in der Produktionsumgebung ... Es gibt Zeiten, in denen.

Klicken Sie hier, um den Code anzuzeigen, der nicht angezeigt werden kann

_Dateiname.scss

.Name der Klasse{
  height: 560px;
  width: 100%;
  background-image: url("Dateiname.jpg ");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

Was unterscheidet sich vom obigen Code

_Dateiname.scss

.Name der Klasse{
  background-image: url("Dateiname.jpg ");
}

Das ist der Teil. Mit dieser Schreibmethode kann es lokal angezeigt werden, wird jedoch in der Produktion nicht angezeigt.

_Dateiname.scss

.Name der Klasse{
  background-image: image-url("Dateiname.jpg ");
}

Durch diese Änderung kann es sowohl in der Produktion als auch lokal angezeigt werden.

Anzeigen von Bildern in der Datenbank Wenn Sie beispielsweise ein Produkt registrieren, können Sie auch ein Bild registrieren. Ich möchte das registrierte Bild anzeigen! !! Dies ist die Methode für einen solchen Fall.

◇ Bedingung 1 ◇ Beim Speichern des Bildes in einer separaten Tabelle Der Grund für das Speichern in einer separaten Tabelle besteht darin, mehrere Bilder zu registrieren. Wenn Sie nur eine registrieren möchten, ist es meiner Meinung nach notwendig, die Tabellen zu trennen.

Controller-Name.rb

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

Holen Sie sich Informationen wie diese. In item_images werden die Bilder gespeichert.

Dateiname.html.haml

- @items.each do |item| #Erweitern Sie mit jedem
　= image_tag item.item_images[0].image.url

_Dateiname.scss

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

Ich könnte es anzeigen, indem ich so schreibe. Um ehrlich zu sein, ist die Beschreibung sehr lang ... Ein solcher Eindruck [0] → Es scheint, dass die Bilder in einem Array gespeichert sind, daher müssen Sie die Anzahl der Bilder angeben.

◇ Bedingung 2 ◇ Wenn das Bild nicht in einer anderen Tabelle gespeichert wird Es wird in html.erb beschrieben.

Controller-Name.rb

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

Holen Sie sich Informationen wie diese.

Dateiname.html.erb

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

Ich habe die Größe in der Datei name.html.erb angegeben. Sie können jetzt sehen: klatschen:

Wenn es eine andere Möglichkeit gibt, es anzuzeigen, lehre mich bitte: bete: