[RUBY] [Rails] How to display an image in the view

This is the first post. I think there are some points that cannot be reached, so I would appreciate it if you could watch over with warm eyes ...

I had a lot of trouble with how to display images in Rails, so I recorded it as a memo. Let's visit now!

• Described in haml / scss.

How to display an image First, how to display an image in Standard. It seems to be displayed regardless of whether you write it in haml or scss. I think the correct answer is which one to write.

As a personal impression, when you want to use an image as a background, For example, when you want to display text information on an image. In such a case, it is better to describe it in scss as background-image. I don't really understand the difference here, so if you can understand the difference, please teach me: frowning2:

First, there must be an image to display. app/assets/images Store the image you want to display in this directory and you're ready to go.

When writing in haml

file name.html.haml

= image_tag ("Image name.jpg ")

I can't display it yet. It will not be displayed unless you set the width and height. In such a case, you need to write a description to arrange the image in scss.

_file name.scss

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

Like this, if you specify width: 100%; and height: 100% ;, it will be displayed safely. In this case, it is "%", but "px" is also possible! When writing in haml, "= image_tag" is essential.

When writing in scss

_file name.scss

.name of the class{
  height: 560px;
  width: 100%;
  background-image: image-url("file name.jpg ");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

You can display it by writing it like this. If you do not write background-size or properties around it, The image will be "Baaaaaaaaa". (Misery) After that, you also need to set the width and height. You need to select the property that matches the image you want to implement.

The image is not displayed only in the production environment It is displayed in the local environment, but it is not displayed in the production environment ... There are times when.

Click here for the code when it cannot be displayed

_file name.scss

.name of the class{
  height: 560px;
  width: 100%;
  background-image: url("file name.jpg ");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

What is different from the code above

_file name.scss

.name of the class{
  background-image: url("file name.jpg ");
}

This is the part. With this writing method, it can be displayed locally, but it is not displayed in production.

_file name.scss

.name of the class{
  background-image: image-url("file name.jpg ");
}

By modifying it in this way, it can be displayed both in production and locally.

How to display images in the database For example, when you register a product, you may also register an image. I want to display the registered image! !! This is the method for such a case.

◇ Condition 1 ◇ When saving images in a separate table The reason for saving in a separate table is to register multiple images. If you want to register only one, I think it is necessary to separate the tables.

Controller name.rb

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

Get information like this. item_images is where the images are stored.

file name.html.haml

- @items.each do |item| #Expand with each
　= image_tag item.item_images[0].image.url

_file name.scss

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

I could display it by writing like this. To be honest, the description is very long ... Such an impression [0] → It seems that the images are stored in an array, so you need to specify the number of images.

◇ Condition 2 ◇ When the image is not saved in another table It will be described in html.erb.

Controller name.rb

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

Get information like this.

file name.html.erb

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

I have specified the size in the file name.html.erb. You can now see: clap:

If there is another way to display it, please teach me: pray: