質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Q&A

1回答

516閲覧

Active Storageで画像を保存後、背景画像として表示させたい

moto12

総合スコア15

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

0グッド

0クリップ

投稿2020/10/30 08:57

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
イラスト投稿アプリを作っています。
画像をActive Storageに保存し、そこから取り出し、background-imageとして表示させたいのですが、思うようにいきません。

index.html.erbファイルで <div class="content_post" style="background-image: url(<%= post.image %>);"> の部分を変える必要があることは分かるのですが、実際にどのように変える必要があるのか、サイトで調べながら試行錯誤してみましたが、Active Storageで保存された画像が背景画像として出てきません。

該当のソースコード

Ruby

1【index.html.erb】 2 3<%= form_with(url: search_posts_path, local: true, method: :get, class: "search-form") do |form| %> 4 <%= form.text_field :keyword, placeholder: "投稿を検索する", class: "search-input" %> 5 <%= form.submit "検索", class: "search-btn" %> 6<% end %> 7<div class="contents row"> 8 <% @posts.each do |post| %> 9 <div class="content_post" style="background-image: url(<%= post.image %>);"> 10 <div class="more"> 11 <span><%= image_tag 'arrow_top.png' %></span> 12 <ul class="more_list"> 13 <li> 14 <%= link_to '詳細', post_path(post.id), method: :get %> 15 </li> 16 <% if user_signed_in? && current_user.id == post.user_id %> 17 <li> 18 <%= link_to '編集', edit_post_path(post.id), method: :get %> 19 </li> 20 <li> 21 <%= link_to '削除', post_path(post.id), method: :delete %> 22 </li> 23 <% end %> 24 </ul> 25 </div> 26 <span class="name"> 27 <a href="/users/<%= post.user.id %>"> 28 <span>投稿者</span><%= post.user.nickname %> 29 </a> 30 </span> 31 </div> 32 <p class="top-contents">題名 <%= post.title %></p> 33 <p class="top-contents description">内容 <%= post.text %></p> 34 <div class='heart-btn'> 35 <% if user_signed_in? && current_user.already_liked?(post) %> 36 <%= link_to post_likes_path(post), method: :delete do %> 37 <i class="heart-color"></i> 38 <% end %> 39 <% elsif user_signed_in? && current_user.id == post.user_id%> 40 <i class="heart-color1"></i> 41 <% else %> 42 <%= link_to post_likes_path(post), method: :post do %> 43 <i class="heart-color1"></i> 44 <% end %> 45 <% end %> 46 <%= post.likes.count %> 47 </div> 48 <% end %> 49</div> 50 51

Ruby

1【post.rb】 2class Post < ApplicationRecord 3 belongs_to :user 4 has_many :comments 5 has_many :likes, dependent: :destroy 6 has_one_attached :image 7 8 def self.search(search) 9 if search != "" 10 Post.where('text LIKE(?)', "%#{search}%") 11 else 12 Post.all 13 end 14 end 15 16 with_options presence: true do 17 validates :text, unless: :was_attached? 18 validates :title 19 validates :image 20 21 with_options length: { maximum: 50} do 22 validates :text 23 validates :title 24 end 25 end 26 27 def was_attached? 28 self.image.attached? 29 end 30 31end 32

Ruby

1【posts.controller.rb】 2 3class PostsController < ApplicationController 4 5 before_action :set_post, only: [:edit, :show] 6 before_action :move_to_index, except: [:index, :show, :search] 7 8 def index 9 @posts = Post.includes(:user).order("created_at DESC") 10 end 11 12 def new 13 @post = Post.new 14 end 15 16 def create 17 Post.create(post_params) 18 end 19 20 def destroy 21 post = Post.find(params[:id]) 22 post.destroy 23 end 24 25 def edit 26 end 27 28 def update 29 post = Post.find(params[:id]) 30 post.update(post_params) 31 end 32 33 def show 34 @comment = Comment.new 35 @comments = @post.comments.includes(:user).order("created_at DESC").limit(5) 36 end 37 38 def search 39 @posts = Post.search(params[:keyword]) 40 end 41 42 private 43 44 def post_params 45 params.require(:post).permit(:image, :text, :title).merge(user_id: current_user.id) 46 end 47 48 def set_post 49 @post = Post.find(params[:id]) 50 end 51 52 def move_to_index 53 unless user_signed_in? 54 redirect_to action: :index 55 end 56 end 57 58end 59

Ruby

Ruby

1ソースコード

試したこと

gemの'mini_magick'と'image_processing', '~> 1.2'は導入済み
Active Storageによる画像保存テーブルは作成済み

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

image_urlヘルパーを利用してみてはいかがでしょうか?
参考:https://railsguides.jp/action_view_overview.html#image-url

投稿2020/10/30 10:40

no1knows

総合スコア3365

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

moto12

2020/10/30 11:33

説明たらずで申し訳ございませんが、ヘルパーのimage_tagを使ってみたのですが、うまくいかず、今現在最初の形に戻している状況ですね... image_tagで出した画像を背景画像にというコード記述は、どのようになるのでしょうか。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問