画像の表示を行いたいです。

Question

### 前提・実現したいこと

画像の表示を行いたいです。

webページ制作の勉強で、試作中なのですが画像(jpg)の表示で早速行き詰まってしまいました。

調べて試してみても自分では解決できず困っております。
どうかお力をお貸しください。

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

Web上で画像が表示できす、altの名前だけ出ています。

GET http://localhost:3000/watermark.jpg 404 (Not Found)

 該当のソースコード
<img src="images/watermark.jpg" alt="トップ画" class="top-image">
```html


### 試したこと

images/を消す、キャッシュの消去を行う。

### 補足情報（FW/ツールのバージョンなど）

https://gyazo.com/467e4bf8c6aeb0f73366bc1ada4b099b

Comments

[m.ts10806]

画像は外部サービスではなく、teratailの投稿機能を利用してください。
あと、このタグ（HTML,MacOS(OSX)）だけの内容ですか？

[anemone.]

ご回答ありがとうございます。
スクリーンショットの画像を添付しようとしたのですが上手くできませんでした。投稿機能を探してきます。

すみません、他にどのタグが必要かわからない状態です。

[m.ts10806]

質問は編集できます。 anemone.さんは「回答」を投稿してしまっています。削除依頼を。
画像を見た感じerbとあるのでRuby on Railsだと思います。
なら、その関係のタグは必要です。

[anemone.]

早朝からお付き合いくださり、ありがとうございます。
Ruby on Railsのタグを追加いたしました。

回答の削除依頼、質問編集を行ってきます。

Answer 1

使われているRuby on Railsなどのフレームワークでは静的リソースへのアクセスはそれ専用の機能が設けられていることが多いです。
実際のファイル置き場がブラウザから直接アクセスできない構成になっていることが多いからです。

画像へのアクセスならimage_tagでしょうか。

cssやjsファイルへのアクセスもこれに倣う必要があります。

Comments

[anemone.]

ありがとうございます。
<img src="images/watermark.jpg" alt="トップ画" class="top-image">
の記述が間違えているのでしょうか。

[m.ts10806]

404が出ている以上は参照を間違っているのは確実です。
間違えないためにフレームワークの機能を使います（機能を使った結果出力されるのはimgタグですが自前で書くより間違いは少ない）

[anemone.]

<%= image_tag "heroのコピー.jpg", alt:"トップ画", class:"top-image" %>と試してみましたが、
ローカルサーバーで、Sprockets::Rails::Helper::AssetNotFound in Tops#index　のエラーが出ました。
調べたところ画像ファイルのディレクトリが違うエラーのようですが、
画像ファイルは、appの中にimagesファイルを作り、その中に画像を置けているので どうやってエラー解決、画像表示を行えば良いのか分からなくなってしまいました…

[m.ts10806]

app/assets配下では？
https://www.javadrive.jp/rails/template/index11.html#section2
デフォルトであったかどうかまで覚えてませんが、jsやcssはあったはず。
「アセットパイプライン」でしたか、調べてみてください。

[anemone.]

ありがとうございます。
app/assets配下にデフォルトでimagesがあったので画像フォルダを移動させました。