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

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

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

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

978閲覧

heroku上でbackground-imageが反映されない

sato-0000

総合スコア0

Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/10/20 04:43

前提・実現したいこと

ruby on rails 6.0.0でアプリケーション作成中です。
開発環境ではCSSに記述したbackground-imageが反映されたのですが、herokuへデプロイ後はbackground-imageのみ反映されていないためご教授頂けますでしょうか。

発生している問題・エラーメッセージ

herokuへデプロイ後はbackground-imageのみ反映されません image_tagで記述した画像は反映されています

該当のソースコード

HTML

ruby

1<header><%= render "shared/header" %> 2</header> 3<body> 4<section class="tweet-wrapper">

CSS

ruby

1.tweet-wrapper{ 2 width:100%; 3 background-image:url(lsize.jpg); 4 background-repeat:no-repeat; 5 background-size:cover; 6 background-position: center center; 7 background-attachment: fixed; 8}

試したこと


config/environments/production.rbに下記を追記

ruby

1config.assets.compile = true 2 config.serve_static_assets = true

②rake assets:precompile RAILS_ENV=production

③ git push heroku master

を行いましたが画像が反映されませんでした。

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

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

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

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

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

guest

回答2

0

css

1- background-image:url(lsize.jpg); 2+ background-image:image-url(lsize.jpg);

アセットパイプラインを使用する場合、最終的にアセットへのパスを変換する必要があります。このために、sass-rails gemは名前が-urlや-pathで終わる (Sass内ではハイフンですが、Rubyではアンダースコアで表します) 各種ヘルパーを提供しています。ヘルパーがサポートするアセットクラスは、画像、フォント、ビデオ、音声、JavaScript、stylesheetです。

image-url("rails.png")はurl(/assets/rails.png)に変換される
image-path("rails.png")は"/assets/rails.png"に変換される

参考:Railsガイド

投稿2020/10/20 05:40

no1knows

総合スコア3365

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

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

sato-0000

2020/10/20 06:56 編集

ご丁寧に回答くださり有難うございます! background-image:image-url(lsize.jpg); ご提案くださった記述では表示がうまくいかず、AWSのS3へ画像をアップしurlに記述する事で解決できました。 しかし、このような記述方法がある事を知る事ができて大変勉強になりました。 アセットパイプラインの理解が浅いため学習しようと思います!
no1knows

2020/10/20 07:00

あぁ、なるほど。 てっきりHerokuと書いてあったので、lsize.jpgがassets配下においてあって、それを取得できないのかと思っていました。 ちなみに直接指定するのであればファイルをrailsのpublic直下におけば、url(lsize.jpg)で取得できるはずです。
sato-0000

2020/10/20 07:12

正しくご指摘の通りなのです! assetes/images/lsize.jpg 画像ファイルのある場所 assets/stylesheets/shard/〇〇.css 画像について記述したCSS 初心者のため理解が乏しく、他の方法も試してみようと思います!
no1knows

2020/10/20 07:23 編集

CSSだけ見て判断せずに、ファイルの構造をきちんと確認しておけばよかったです。 ということでたぶん下記が適切な回答でしたね。 background-image: image-url("images/lsize.jpg");
guest

0

自己解決

AWSのS3へ画像をアップしurlに記述する事で解決できました。

CSS

ruby

1background-image:url(S3へアップロードした画像のurlを記述);

投稿2020/10/20 06:59

sato-0000

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問