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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1403閲覧

画像の挿入時のエラーについて

ma-------ro

総合スコア8

Ruby on Rails

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/07/26 08:43

エラーコード

Routing Error

No route matches [GET] "/Users/kurosawaminoruhiroshi/Desktop/blog/app/assets/images/06.png"

質問内容

画像を表示させるためにはどうしたら良いのでしょうか?

該当コード

html

1<!DOCTYPE html> 2<html> 3<head> 4<html lang="ja"> 5<meta charset ="utf-8"> 6<!--検索時ヒットしやすくなる--> 7<meta name=”description” content=”これはdescriptionです”> 8<!--検索時この要件を満たす場合を場合ヒットしない--> 9<meta name=”robots” content=”noindex,nofollow”> 10<!--作者の情報を表示--> 11<meta name=”author” content=”mahi”> 12<!--仮装のウィンドウを立ち上げる--> 13<meta name="viewport" content="width=device-width,initial-scale=1"> 14<link rel="stylesheet" href="css/styles.css"> 15<!--HTMLをHTMLとして読み取る--> 16<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script> 17</head> 18<div class="social-icons"> 19<ul class="unstyled social-icons"> 20<li> 21<a href="https://twitter.com/tamurabudouten?lang=ja"><img src="https://img.shop-pro.jp/tmpl_img/68/social_twitter_2x.png"></a> 22<a href="https://www.instagram.com/tamurabudouten/?hl=ja"><img src="https://img.shop-pro.jp/tmpl_img/68/social_instergram_2x.png"></a> 23<a href="https://ja-jp.facebook.com/tamurabudou.yamanashi"><img src="https://img.shop-pro.jp/tmpl_img/68/social_facebook_2x.png"></a> 24</li> 25</ul> 26<p class="btn-square-soft new-btn"><%= link_to "New",new_article_path(@article) %></p> 27</div> 28 <body> 29 <%= image_tag('/Users/kurosawaminoruhiroshi/Desktop/blog/app/assets/images/06.png') %> 30 <h1 class="mt-5">✖️✖️のブログ</h1> 31 <div class="text"> 32 <% @article.each do |article| %> 33 <p class="text-h2"><%= article.title %></p> 34 <p><%= article.created_at.strftime('%Y/%m/%d %H:%M') %></p> 35 <p><%= article.text %></p> 36 <div class="btn"> 37 <button type="button" class="btn btn-info btn-sm"><%= link_to "Show", article_path(article) %></button> 38 <button type="button" class="btn btn-success btn-sm"><%= link_to "Edit", edit_article_path(article) %></button> 39 <button type="button" class="btn btn-danger btn-sm"><%= link_to "Destroy", article_path(article),method: :delete,data: { confirm: "Are you sure ?" } %></button> 40 </div> 41 <% end %> 42 </div> 43 44 </body> 45</html>

routes

1 2Rails.application.routes.draw do 3 # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html 4 5 resources :articles 6end 7

試したこと

rails db:migrate

挿入元フォルダをassets/images/→ public/assetsに変更

以下ページを参考にしました。

https://teratail.com/questions/211920

https://teratail.com/questions/81220
http://qiita.com/y_minowa/items/5954907bb30c2ecb43f5

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

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

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

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

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

guest

回答1

0

ベストアンサー

image_tagのパスの指定が間違っているように見えます。
<%= image_tag('/Users/kurosawaminoruhiroshi/Desktop/blog/app/assets/images/06.png') %>
※上記の箇所

これはページ共通で使用する画像でしょうか?
Railsは画像を配置するディレクトリが決まっております。
app/assets/imagesもしくはpublic以下となります。

画像をapp/assets/images以下に配置して
該当の<%= image_tag('06.png') %>とすれば解決するかと思います。

以下のblogが大変参考になるので読んでみると良いです。
https://techblog.kyamanak.com/entry/2017/10/13/003818

投稿2020/07/26 08:55

yamamon3215

総合スコア48

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

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

ma-------ro

2020/07/26 11:51

教えていただきました、通りに変更いたしましたところエラーが解除されました。 回答及び参考ブログの紹介をしていただきありがとうございます 教えていただきましたブログを下に、画像の挿入について改めて勉強させていただきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問