background-image リンク先もあっているが表示されない問題

Question

rails6 で開発してます

.explanation-wrapper{
  width: 100vw;
  height: 100vh;
  background-image: url("../images/second_photo.JPG");
  background-size: cover;
}

このように記述したのですが
検証ツールで見ると404(Not Found)になってしまいます
VScodeのリンクを表示するを確認してもしっかりと画像にリンクが飛んできます

画像の保存先を変えたり
backgroud-colorでしっかり内容が範囲が指定されてるかも確認しましたが表示されません…

他に問題があるとしたらどのようなところでしょうか
ご教示ください
よろしくお願いいたします！

##ご回答をいただいて実行したコード

index.cssをindex.css.erbにファイルを変更し

  background-image: image-url("../images/second_photo.JPG");

を記述しましたが無効化されてしまいました…
![]

###二つ目
ファイル名をindex.cssからindex.css.erbに変更し

  background-image: url(<% asset_path 'images/second_photo.JPG' %>);

を記述したところ not fandはなくなりました

が画像は表示されませんでした…

解決しました！！
帰ってきてから内容詳しく記述します！

Comments

[maisumakun]

CSSファイルの置き場所はどこでしょうか？

（管理方法によって正しい手段が違ってきます）

[EleAco]

maisumakunさん
ご質問ありがとうございます！
app>assets>stylesheets>index.css
このような形です！！

Answer 1

アセットパイプラインで画像URLが変更されるので、image-url("rails.png")を使いましょう。（Railsガイド）

- background-image: url("../images/second_photo.JPG");
+ background-image: image-url("../images/second_photo.JPG");

Comments

[EleAco]

no1knowsさん
ご回答ありがとうございます
background-image: image-url("../images/second_photo.JPG");
を記述しましたが
無効化されてしまいます…
ファイル名をindex.css.erbに変更しても
ダメでした
どのようにしたら良いでしょうか

[no1knows]

あぁ、ごめんなさい。下記でいかがでしょうか？
background-image: image-url("images/second_photo.JPG");

[EleAco]

no1knowsさん
追加でありがとうございます！！
無効化されてしまいます…
この記述はcssをerbに変更してそこに記述するであっていますでしょうか？？
image-urlという選択肢が検証ツールで見てもでてこなくて…
この記述はどこにするのでしょうか…？？

Answer 2

皆様ご回答いただきあありがとうございました！
大変勉強になりました！
最終的な記述として

index.cssとは別にindex.css.erbを作成して

  background-image: url(<%= asset_path('second_photo.JPG') %>);

このように記述することで画像が表示されるようになりました！
Railsでbackground-image(背景画像)を設定する
この記事を参考にしました
皆様ありがとうございました。

Answer 3

file名に .erb をつけてください
url("../images/second_photo.JPG") のところを
url(<%= asset_path"images/second_photo.JPG"%>) にしてください

Comments

[EleAco]

winterboumさん回答ありがとうございます
CSSのファイル名をindex.css.erbに変更し
url(<%= asset_path"images/second_photo.JPG"%>)
を記述したところnot fandはなくなりました！
しかし表示はされず

検証ツールで見ると
background-image: url(index.self-11d8913….css);
このような表示になって画像自体は何もでません…
他に注意点ありますか？？