개시하다

문제점

Rails5.2에서 추가된 액티브 스토어를 활용해 파일을 쉽게 업로드할 수 있지만, 브라우저에 표시할 수 없는 이미지를 태그로 표시하면 좀 보기 흉할 수 있다.

솔루션

브라우저에 표시할 수 있는 이미지 파일만 업로드 가능

브라우저에 표시할 수 있는 이미지 파일만 축소판 그림으로 표시

솔루션

1. 브라우저에 표시된 이미지 파일만 업로드 가능

(ActiveStorage와는 무관하지만) 파일 선택 대화 상자에서 선택할 수 있는 파일 확장자는 accept 탭에서 지정할 수 있습니다.accept 레이블에 지정되지 않은 파일을 선택할 수 없습니다.
app/views/users/_form.html.erb

<div class="field">
  <%= form.label :avatar %>
  <%= form.file_field :avatar, accept: '.jpeg, .jpg, .gif, .png, .bmp' %>
</div>

보충:
accept 탭에 image/* 를 지정하면 브라우저에 표시할 수 없는 이미지 파일 (tiff 등) 을 선택할 수 있습니다.

2. 브라우저에 표시할 수 있는 이미지 파일만 축소판 그림으로 표시

ActiveStorage를 사용하여 업로드된 파일 이름의 끝을 확인하고 브라우저에서 지원하는 이미지 파일의 축소판에 표시합니다.그 외에는 축소판 그림이 표시되지 않습니다.
app/views/users/show.html.erb

<%# ファイルが添付されてるか？ %>
<% if @user.avatar.attached? %>
  <p>
    <strong>Avatar:</strong>
    <%# ファイル名を表示 %>
    <%= @user.avatar.filename %>

    <%# ファイルがの拡張子がjpeg,jpg,gif,png,bmpか？ %>
    <% if @user.avatar.filename.to_s =~ /\.jpeg$|\.jpg$|\.gif$|\.png$|\.bmp$/ %>
    　　 <p>
       <%# 画像ファイルを表示 %>
       <%= image_tag @user.avatar, height: '100' %>
      </p>
    <% end %>

  </p>
<% end %>

보태다

이번 투고의 축소판은 대상 이미지 파일의 확장자를 위키백과 다음 페이지를 참고했다.

Comparison of web browsers - Wikipedia