dexcter
@dexcter

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

Carrierwaveでリサイズしたら画像が表示されない

解決したいこと

Ruby on RailsでフォートラベルのようなWebアプリをつくっています。
投稿一覧で画像を表示する機能の実装中にエラーが発生しました。
アップロードした画像をリサイズして表示したいです。
解決方法を教えて下さい。
よろしくお願いいたします。

開発環境

ubuntu(wsl)
ruby 2.5.1
rails 6.0.3

---Gemfile---
mini_magick (4.10.1)
carrierwave (2.1.0)

発生している問題・エラー

Started GET "/uploads/user/image/115/thumb35_%E7%94%9F%E7%94%B0%E7%B5%B5%E6%A2%A8%E8%8A%B1_1.PNG" for 127.0.0.1 at 2020-09-21 09:45:56 +0900

ActionController::RoutingError (No route matches [GET] "/uploads/user/image/115/thumb35_%E7%94%9F%E7%94%B0%E7%B5%B5%E6%A2%A8%E8%8A%B1_1.PNG"):

アップロードした画像は表示されるのですが、リサイズしようとすると表示されません。
スクリーンショット (32).png

該当するソースコード

app/views/micropost/index.html.slim
- @microposts.each do |micropost|
  .card.mb-3.mx-auto style="max-width: 540px"
    .card
      .card-header
        .micropost-user
          - if micropost.user.image
          //ここが上手く動かない
            = image_tag micropost.user.image.thumb35.url.to_s, class: 'rounded-circle user_avatar'
          - else
            = image_tag 'pengin.png', class: 'rounded-circle'
          = link_to  micropost.user.name, micropost.user
        .micropost-info
          samll = micropost.created_at.to_s
      .card-body
        = link_to image_tag(micropost.images[0].url) , micropost
        - if logged_in?
          ul.list-inline style="margin: 1.25rem auto 0 auto"
            li.list-inline-item
              //= render "likes/like", micropost: @micropost
            - if current_user.admin?
              = link_to  "削除(仮)", "#"
            - else
              - if current_user.id == micropost.user.id
                li.list-inline.float-right
                  = link_to  "削除", micropost, method: :delete, data: { confirm: '投稿を削除してもよろしいですか?'}, class: 'btn btn-outline-dark'
                li.list-inline.float-left.mr-2
                  = link_to  "編集", edit_micropost_path(micropost), class: 'btn btn-outline-dark'

app/uploaders/images_uploader.rb
class ImagesUploader < CarrierWave::Uploader::Base
  include CarrierWave::MiniMagick
  process resize_to_limit: [400, 400]

  storage :file

  version :thumb35 do
    process resize_to_fill: [35, 35]
  end


  # Override the directory where uploaded files will be stored.
  # This is a sensible default for uploaders that are meant to be mounted:
  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end

  def extension_whitelist
    %w[jpg jpeg png]
  end

  # Provide a default URL as a default if there hasn't been a file uploaded:
  def default_url(*args)
    'pengin.png'
  end
end

routes.rb
Rails.application.routes.draw do
  namespace :admin do
    resources :users
  end
  root 'static_pages#home'
  %w(about help).each do |path|
    get path, to: "static_pages##{path}"
  end
  get '/signup', to: 'users#new'
  post '/signup', to: 'users#create'
  get '/login', to: 'sessions#new'
  post '/login', to: 'sessions#create'
  delete '/logout', to: 'sessions#destroy'
  post '/guest_sign_in', to: 'sessions#new_guest'
  post '/password_resets/new', to: 'password_resets#create'
  post '/password_resets/:id/edit', to: 'password_resets#update'
  resources :users do
    resources :likes, only: [:index]
    get 'confirm'
    member do
      get :followings, :followers
    end
  end
  resources :account_activations, only: [:edit]
  resources :password_resets, only: [:new, :create, :edit, :update]
  resources :relationships, only: [:create, :destroy]
  resources :notifications
  resources :microposts do
    resources :comments
  end
  resources :likes
end

自分で試したこと

  • コマンドにrake assets:precompileを入力。

  • 画像の保存先を変えてみる

app/uploaders/images_uploader.rb
  version :thumb35 do
    process resize_to_fill: [35, 35]
    def store_dir
      "public/uploads/user/image"
    end
  end
0

1Answer

リサイズされた画像が以下フォルダに格納されているのは、確かでしょうか?
115 ってなんだろう..)

また、ブラウザから画像に直アクセスしてWEBサーバーのエラーログなどチェックするとよいかと思います。

/uploads/user/image/115/thumb35_%E7%94%9F%E7%94%B0%E7%B5%B5%E6%A2%A8%E8%8A%B1_1.PNG
= image_tag micropost.user.image.thumb35.url.to_s, class: 'rounded-circle user_avatar'
0Like

Comments

  1. @dexcter

    Questioner

    回答ありがとうございます!
    画像は400×400で格納されていました。

    cssから指定したら表示できました。

Your answer might help someone💌