画像が反映されない パスわからない

Question

<概要>
top_image.jpgの画像を表示させたいです。このtop_image.jpgは、他のサイトから、持ってきている画像で、そのurlだとうまく表示できるのですが、下記のようにいろいろ試してもうまくいきません。
何が悪いのか教えていただきたいです。

<section class="top" style="background: url('top_image.jpg') no-repeat 50% 50% fixed;">

<section class="top" style="background: url('app/assets/images/top_image.jpg') no-repeat 50% 50% fixed;">

<section class="top" style="background: url('images/top_image.jpg') no-repeat 50% 50% fixed;">

top_image.jpgの場所

Comments

[Yorrie]

HTMLファイルの居場所が不明なので、top_image.jpgとの位置関係がわからず何も言えないです。

Answer 1

ディレクトリ構成見ると、
railsか何かフレームワーク使ってる感じでしょうか？

フレームワーク使ってましたら、ビルド後の構成を考えないといけないので、localhost立てて以下のような形かと思います。
/assets/images/top_image.jpg

app/view/users/products/top.html
このtop.htmlをビルド等せず、単純にウェブブラウザで見るのでしたら、以下のようにすれば見れると思います。

background: url('../../../assets/images/top_image.jpg');

Comments

[WHdfghjk]

railsを使ってます。申し訳ありません。ビルド後の構成を考えるとはどのようなことでしょうか？
また回答のように行いましたが、ターミナルでActionController::RoutingError (No route matches [GET] "/assets/images/top_image.jpg"):
と出でしまいます。../../../をつけていろいろ試した場合も同様です。

Answer 2

/assets/images/top_image.jpg
か
/app/assets/images/top_image.jpg
で表示できそうな気がします。

---

↓「app/assets/images/」フォルダ内にHTMLファイルがなければ表示できません
<section class="top" style="background: url('top_image.jpg') no-repeat 50% 50% fixed;">

↓「app/」フォルダと同じ階層にHTMLファイルがなければ表示されません。
<section class="top" style="background: url('app/assets/images/top_image.jpg') no-repeat 50% 50% fixed;">

↓「app/assets/」フォルダ内にHTMLファイルがなければ表示されません。
<section class="top" style="background: url('images/top_image.jpg') no-repeat 50% 50% fixed;">

Comments

[WHdfghjk]

やってみましたが、表示されません。

[WHdfghjk]

なるほど、画面を表示させたい、top.htmlの場所はapp/view/users/products/top.htmlなのですが、このような場合は、どのようにファイルパスを書けば良いのでしょうか？

[new1ro]

相対パスなら、以下のようになると思います。
../../../assets/images/top_image.jpg

「../」が1つ多かったり、1つ少なかったりするかもしれないので、
うまくいかない場合、試してください

[WHdfghjk]

回答のように行いましたが、ターミナルでActionController::RoutingError (No route matches [GET] "../../../assets/images/top_image.jpg"):
と出でしまいます。

[new1ro]

こっちかもしれないです。
../../../../assets/images/top_image.jpg

「../」を増やしたり減らしたりしてみてほしいです。

[WHdfghjk]

ありがとうございます。解決できました。