How to Add Images to a Rails Application
Walk through the steps necessary for integrating images into a Ruby on Rails application, including the ability to customize the size of images.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

Images are an integral part of every application, and this is why we are going to learn how to add images to a rails application.

To do this, go to app/assets/images and add all your file to the images folder. Though this is fine for small projects, you may want to better organize your image files if you're going to build a large project that can have hundreds of images.

For this example, I'm going to create a new folder and call it logos. Then, right-click on the .keep file and click the "Reveal in Finder" option. This opens the view finder, and on this, click the logos folder. Here, you can drag and drop one or more logo image files.

To have this logo on every page, go to the application file and put in some embedded Ruby code. This time I'm going to use one of our image helpers.

<%= image_tag ("logos/logo.png") %>

Now, if you go to the browser, this is how the home page looks:

large

If you see, the image helper image_tag knew to go to the asset pipeline and find the image there.

Now, the image file we have is probably too big for the page. So, to make it more appropriate, you can pass some parameters to the image_tag method. For this image, I want to resize the width, so I say:

<%= image_tag ("logos/logo.png, width: 150px") %>

My home page now looks like this.

medium

In a real application, you are more likely to have this code inside a <div> tag so you can give different classes to it, but for right now this shows us how images can be called within an application.