【Rails】image_기본 이미지와 기본 이미지의 설정 방법

7434 단어 image_tagRails

image_기본 계획


image_'tag'은 Rails가 준비한 HTML 태그를 생성하는 방법입니다.
페이지에 이미지를 표시할 때 사용합니다.
문장의 구조는 다음과 같다.
image_tag(source, options = {})
source 부분에서 그림이 있는 위치를 설명하고 옵션에서class 이름과alt 속성을 지정합니다.
※ alt 속성이 무엇인지는 이쪽 링크를 통해 확인하세요.간단하게 설명하면 이미지가 특정 이유로 표시되지 않을 때 대신 표시되는 문자가 됩니다.
alt 속성
클래스 이름과alt 속성을 사용할 때 다음과 같습니다.
uby
image_tag 'icons/cat.jpg', :class=>"cat-icon", :alt => '猫の画像'
참고로, eb 파일에 기술할 때 <%=%>로 둘러싸야 합니다.
<%= image_tag 'icons/cat.jpg', :class=>"cat-icon", :alt => '猫の画像' %>

그림을 어디에 놓을까요?


① "app/assets/images" 디렉토리


여기에 놓으면 파일 이름만 지정하면 됩니다.
<%= image_tag 'cat.jpg' %>

② "app/public" 디렉토리


"public"디렉터리 바로 아래에 이미지 파일을 설정할 때
여기에 놓으면 앱의 상대적인 경로를 써야 한다.
<%= image_tag '/cat.jpg' %>

사용자 아이콘 등을 기본적으로 설정하려면


나는 사용자가 등록할 때 이름과 메일 주소 등을 입력하고 이미지를 등록하지 않으면 완성되는 경우가 많다고 생각한다.
새 로그인이 완료된 후 사용자의 이미지는 아무것도 들어오지 않은 상태이기 때문에 기본적으로 그림을 입력하는 방법을 먼저 적으십시오.

메서드 ① 이미지를 업로드하지 않은 경우 CarrierWave 사용


image_uploader.rb의 코드를 조금만 만지작거리면 기본적으로 설정된 그림을 대상의 위치에 놓으면 설정을 완성할 수 있습니다.

STEP1:image_uploader.희롱하다


app/uploaders/image_uploader.rb
(中略)
  # Provide a default URL as a default if there hasn't been a file uploaded:
  # def default_url(*args)
  #   # For Rails 3.1+ asset pipeline compatibility:
  #   # ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))
  #
  #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')
  # end
(中略)
아래와 같이 이것↓
app/uploaders/image_uploader.rb
(中略)
  # Provide a default URL as a default if there hasn't been a file uploaded:
  def default_url(*args)
  #   # For Rails 3.1+ asset pipeline compatibility:
  #   # ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))
    "default.jpg"
  #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')
  end
(中略)

STEP2: app/assets/images 바로 아래에 파일 놓기


image_uploader.rb가 지정한 파일 이름을 놓습니다. (이번은default.jpg)

이렇게 완성!


이렇게 하면 그림이 업로드되지 않았을 때,carrierwave는 자동으로 기본적으로 그림을 설정합니다.

방법 ② 컨트롤러에 미리 데이터를 준비하는 방법


컨트롤러를 사용하여 실례 변수에 데이터를 미리 입력하는 방법.이번에는 사용자 로그인을 구상했다.
app/controllers/users_controller.rb
class UsersController < ApplicationController
(中略)

def create
   @user = User.new(user_params)
   #デフォルトで画像を設定しておく。ユーザーのimageカラムにデータを代入
   @user.image = "default_icon.jpg"
    if @user.save
      redirect_to posts_path, success: '登録ができました'
    else
      flash.now[:danger] = "登録に失敗しました"
      render :new
    end
  end
(中略)

  def user_params
    params.require(:user).permit(:name, :password, :password_confirmation, :image)
  end
end
그리고 뷰 옆에 보이면 돼요!
user.show.html.erb
<%= image_tag @user.image_icon.url, class:"user-icon" %>

P.S.


Carrier Wave를 사용하여 기본 이미지를 설정하는 방법은 사실상 단점이 있습니다.
그것은 업로드해야 할 이미지 부분이 모두 같은 기본 이미지로 바뀌었다.
업로드 후 표시된 이미지에 무의식적으로 준비한 이미지를 사용했기 때문에 표시와 일치하지 않는 부분에도 적용될 수 있습니다.
업로드된 이미지가 하나면 문제없지만 여러 군데가 있다면 컨트롤러에서 데이터를 각각 전달하는 것이 비교적 유용하다고 생각합니다.

참고 자료

  • CarrierWave를 사용하여 사용자 이미지를 설정합니다.
  • 한 사람의 생활 블로그
  • 좋은 웹페이지 즐겨찾기