[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!

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:

Recommended Posts

[Rails] How to display an image in the view
[Rails] How to display information stored in the database in view
How to set the display time to Japan time in Rails
[rails] How to display parent information in child view in nested relationships
How to write the view when Vue is introduced in Rails?
How to check Rails commands in the terminal
How to display the text entered in text_area in Rails with line breaks
[Swift] How to set an image in the background without using UIImageView.
How to make an image partially transparent in Processing
[Rails 6] How to set a background image in Rails [CSS]
[Rails] How to load JavaScript in a specific view
[rails] How to display db information
[Rails] How to write in Japanese
How to introduce jQuery in Rails 6
How to install Swiper in Rails
How to retrieve the hash value in an array in Ruby
How to display a graph in Ruby on Rails (LazyHighChart)
[Rails] How to display the list of posts by category
How to install Docker in the local environment of an existing Rails application [Rails 6 / MySQL 8]
[Rails] How to display the weather forecast of the registered address in Japanese using OpenWeatherMap
How to crop an image with libGDX
How to implement search functionality in Rails
[Rails / Routing] How to refer to the controller in the directory you created
How to change app name in rails
How to use custom helpers in rails
Display an image on the base64 screen
How to blur an image (super easy)
How to insert a video in Rails
[Rails] How to use the map method
[Rails] How to display error messages individually
How to output the value when there is an array in the array
How to use MySQL in Rails tutorial
[Rails] How to omit the display of the character string of the link_to method
[Behavior confirmed in December 2020] How to implement the alert display function
[rails] How to configure routing in resources
How to implement ranking functionality in Rails
How to implement image posting using rails
[Rails] How to use video_tag to display videos
[Rails] How to reset the database in production environment (Capistrano version)
How to use credentials.yml.enc introduced in Rails 5.2
Rails6: Extract the image in Action Text
How to get the length of an audio file in java
[Rails 5] How to display the password change screen when using devise
How to display error messages in Japanese
[Swing] How to display an arbitrary name on the menu bar on Mac
[Rails] How to get the user information currently logged in with devise
I want to display an error message when registering in the database
How to debug the processing in the Ruby on Rails model only on the console
[Rails] How to apply the CSS used in the main app with Administrate
Change the save destination of the image to S3 in the Rails app. Part 2
How to check the logs in the Docker container
[Ruby on Rails] How to display error messages
I tried to organize the session in Rails
How to display a web page in Java
[Rails] How to use select boxes in Ransack
How to translate Rails into Japanese in general
How to prevent direct URL typing in Rails
How to separate .scss by controller in Rails
How to conditionally add html.erb class in Rails
[Japanese localization] i18n rails Easy Japanese localization view display only
How to implement a like feature in Rails