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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Ruby on Rails

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

パス

パス(path)はファイルシステムの場所(階層)を明示したものです。

Q&A

解決済

1回答

1313閲覧

Ruby on Rails6でimgタグを使い画像を表示する方法が分かりません。

mikiyaaa

総合スコア1

Ruby

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Ruby on Rails

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

パス

パス(path)はファイルシステムの場所(階層)を明示したものです。

0グッド

0クリップ

投稿2021/03/29 15:45

前提・実現したいこと

プログラミング初心者です。

rails6でアプリを開発しており、bootstrapでcardを実装しようとしています。
cardの中に任意の画像を表示させたいです。
bootstrapを使用しているため、image_tagではなくimgタグで記述しています。

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

画像が表示されず、山のアイコンのような画像が表示されます。
ターミナルとコンソール上には以下のエラーが表示されます。

ターミナル ActionController::RoutingError (No route matches [GET] "/assets/images/depositphotos_1982682-stock-photo-reading-in-front-of-cheminey.jpg"): コンソール Failed to load resource: the server responded with a status of 404 (Not Found)

該当のソースコード

Ruby

1<div class="card" style="width: 18rem;"> 2 <img class="card-img-top" src="../../assets/images/depositphotos_1982682-stock-photo-reading-in-front-of-cheminey.jpg" alt="Card image cap"> 3 <div class="card-body"> 4 <h5 class="card-title">Card title</h5> 5 <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> 6 <a href="#" class="btn btn-primary">Go somewhere</a> 7 </div> 8</div>

試したこと

恐らく指定した画像パスが正しくないことが原因であると思います。
絶対パスと相対パス両方での指定を試みましたが、非表示のままでした。

現状は相対パスで画像のパスを指定しており、正しく記述していると思います。
../の使い方が間違っているのでしょうか。

非常に初歩的な質問で申し訳ありませんが、ご相談に乗って頂けると嬉しいです。

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

ディレクトリ構造は以下の通りです。
./app/
├── assets
│ ├── config
│ │ └── manifest.js
│ ├── images
│ │ └── depositphotos_1982682-stock-photo-reading-in-front-of-cheminey.jpg
│ └── stylesheets
│ ├── application.scss
│ └── books.scss
省略
└── views
├── books
│ └── index.html.erb ←ここで画像を表示させたいです。
省略

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

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

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

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

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

guest

回答1

0

ベストアンサー

app/assets に置いたものはそのままpathを書いてもだめです。
src=<%=image_path("depositphotos_1982682-stock-photo-reading-in-front-of-cheminey.jpg")%>
としてください

でも、
bootstrapを使用しているにしても image_tag は使えますよ?
どんな問題がでました?

投稿2021/03/29 23:14

winterboum

総合スコア23329

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

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

mikiyaaa

2021/03/30 06:53

ご回答ありがとうございます。 image_pathで記述したところ解決致しました。 質問する前に自分でimage_tagに書き換えたところ表示されましたが、imgタグだと非表示になってしまったので今回質問させて頂きました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問