이미지 목록 표시 구현 구현

현재 프로그래밍 스쿨에서 프리마 앱을 5 명으로 구현 중
조금 번거로운 홈 화면의 일람 표시의 실장 순서를 올립니다.
프론트 구현은 완료되었다고 합니다.

개발 환경
rails 5.2.4.1
루비 2.5.1

마크업은 함몰로 ​​갔다.

※아웃풋을 위한 기술
※초학자용으로 기술합니다

완성 이미지

※ 올려 놓은 사진은 동물이지만 어디까지나 테스트 이미지로 올려 놓고 있습니다.
미리 양해 바랍니다.

우선 컨트롤러의 설명에서
이번에는 목록을 표시하고 싶으므로 대상 app/controllers/home_controller.rb 편집

home_controller.rb

 class HomeController < ApplicationController
   def index
     @images = Image.all
     @items = Item.all
   end
 end

이번에는 프리마의 item 테이블과 image 테이블의 데이터를 취득 할 수 있도록 일단 기술
이제 아이템 테이블과 이미지 테이블의 데이터를 홈 화면으로 가져옵니다.
rote는 이미 되어 있기 때문에, 이번에는 추기는 없었습니다만, 일단 탑재하고 있습니다

routes.rb

 Rails.application.routes.draw do
   devise_for :users
   root "home#index"
   resources :items, only: [:new, :create, :show, :edit, :destroy]
   resources :sendings, only: [:new, :create]
   resources :users, only: [:edit]
   resources :cards, only: [:new, :create, :index, :destroy]
   resources :orders, only: [:index, :new, :create] do  
     collection do
       get 'index', to: 'orders#index'
       post 'pay', to: 'orders#pay'
       get 'done', to: 'orders#done'
     end
   end
 end

다음으로 함몰에 추가

  .main__item__category
    %h2.main__item__category__title
      ピックアップカテゴリー
    .main__item__category__item_box
      = link_to "#", class: "main__item__category__item_box__title" do
        新規投稿商品
      %ul.main__item__brand__item_box__lists
        %li
       👉- @items.each do |item| 
       👉  = link_to item_path(id: item.id) ,class: 
"main__item__brand__item_box__lists--list, item_list" do
            - ft_image = item.images.first
            = image_tag ft_image.photo.url, class: 
"item_list__picture"
            .item_list__body
              %h3.item_list__body__name
                = item.name
              %ul
                %li.item_list__body__price 
                  = item.price 
                  = "円"
                %li.item_list__body__likes
                  = icon 'fas', 'star'
                  0
              %p (税込)     

이번에는 item 테이블에 붙어있는 image의 최초의 데이터를 취득하고 싶었기 때문에, 위의 👉와 같이 추기했습니다.
이 기술로 데이터를 취득해 표시까지는 할 수 있었습니다.
그리고는 스크롤로 이미지가 잘 스크롤하도록 했습니다.
길어지기 때문에 스크롤은 다른 기사에 올리고 싶습니다.