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

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

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

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

Ruby on Rails

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

検索

検索は、あるデータの集まりの中から 目的のデータを見つけ出すことです。

Q&A

解決済

1回答

1865閲覧

rails内の画像をjQueryの.toggle();を使って交互に表示したい。

randm_meet

総合スコア6

HTML5

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

Ruby on Rails

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

検索

検索は、あるデータの集まりの中から 目的のデータを見つけ出すことです。

0グッド

0クリップ

投稿2020/03/28 14:21

rails を用いてtodoアプリを作成しています。
機能の中に画像を表示・非表示を行う機能を追加したいのですがうまくいきません。
jQueryを用いることで実装を行うことができると検索で知り挑戦しているのですが、知識不足のためエラーで止まってしまっています。

解決したいこと
railsの"hi.jpg(app/aseets/images/hij.jpg)"をjQueryのtoggle();を用いて表示・非表示をクリックによって行いたい。

現状
ページにて検証を用いてconsolを確認するとFailed to load resource: the server responded with a status of 404 (Not Found)との表記が出されている。
実際のページ内にはボタンと画像が表示されることを想定していたが、ボタンは作成されており画像が"壊れた画像"のアイコンがある。

app/aseets/javascripts/tasks.js $(function () { $('button').on('click', () => { $('hi.jpg').toggle(); }); });
app/views/tasks/index .tasks-text 作業内容: =task.tasktext %button ここをクリック %img{:src => "asset_path""hi.jpg"}/

試したこと仮説
Failed to load resource: the server responded with a status of 404 (Not Found)
の内容から、持ってくるべき画像のファイルはないよと解釈しました。
画像を指定するパスが間違っているのかと考えjsでの画像の引用方法を検索
https://codenote.net/ruby/rails/1127.html
↑ ファイル引用のために参考にさせていただいたサイト
jsでrails内の画像を用いるには /assets/images/hi.jpg"}/のような表記方法が有効とのことでしたが解決できませんでした。

https://www.sejuku.net/blog/40705
↑ toggle();を使うために参考にさせていただいたサイト

GET http://localhost:3000/asset_pathhi.jpg 404 (Not Found)
%img{:src => "asset_path""hi.jpg"}/だと↑の表記

GET http://localhost:3000/assets/images/hi.jpg 404 (Not Found)
%img{:src => "/assets/images/hi.jpg"}/だと↑の表記

になります。

解決のためお知恵を貸していただけると幸いです。
よろしくお願いします。

Rails 5.0.7.2

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

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

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

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

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

guest

回答1

0

自己解決

rails 中での読み込みを諦めてhttp:〜imgを指定して読み込むとうまく作動しました。

投稿2020/03/29 09:14

randm_meet

総合スコア6

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問