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

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

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

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

HTML5

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

333閲覧

画像を表示させたいです。

Naoto1

総合スコア12

Ruby

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

HTML5

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/05/04 00:18

編集2020/05/04 00:55

下記の<%= r.image %>を表示させたいのですが、現状何も表示されておりません。
他の、titleやcontentは正常に表示されています。
また、imageに関しては、string型でmysqlにて「abc.jpeg」のような形でデータを入れております。
application.htmlのコードとmysqlのCREATE構文も載せます。

Ruby

1<div class = "box"> 2 <% @recipi.each do |r| %> 3 <div class = "recipi__title"> 4 <%= r.title %> 5 </div> 6 <div class="recipi__content"> 7 <%= simple_format(r.content) %> 8 </div> 9 <div class="recipi__images--image" style= "background-image: url(<%= r.image %>);" > 10 </div> 11 <% end %> 12</div>

HTML

1<!DOCTYPE html> 2<html> 3 <head> 4 <title>BabyCooking</title> 5 <%= csrf_meta_tags %> 6 <%= csp_meta_tag %> 7 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> 8 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 9 <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 10 </head> 11 12 <body> 13 <header> 14 15 <div class = "header__title"> 16 <%= link_to"°·.¸.·°¯°·.¸.·°¯°·.¸.-> ???? ベビ・クック ???? >-.¸.·°¯°·.¸.·°¯°·.¸.·°", "/" %> 17 </div> 18 19 <div class = "header__contents"> 20 <div class = "header__contents--image"> 21 <img src="https://illust8.com/wp-content/uploads/2019/10/baby_ball_4973.png" alt="" width="100" height="100" ></a> 22 </div> 23 24 <div class="header__contents--menu"> 25 <div class = header__contents--menu1> 26 <%= link_to "レシピ", "/recipis" %> 27 </div> 28 <div class = "header__contents--menu2"> 29 <%= link_to "ママさんの声", "/" %> 30 </div> 31 <div class = "header__contents--menu3"> 32 <%= link_to "育児ニュース", "https://rocketnews24.com/tag/%E8%82%B2%E5%85%90/" %> 33 </div> 34 </div> 35 36 <div class = "account"> 37 <% if user_signed_in? %> 38 <div class = "account__edit"> 39 <%= link_to "アカウント編集" , "/users/edit" , class: "account__edit--link" %> 40 </div> 41 <div class = "account__logout"> 42 <%= link_to "ログアウト" , "/users/sign_out", method: :delete, class: "account__logout--link" %> 43 <div> 44 <% else %> 45 <div class = "account__registrations"> 46 <%= link_to "新規登録" , "/users/sign_up" , class: "account__registrations--link" %> 47 </div> 48 <div class = "account__login"> 49 <%= link_to "ログイン" , "/users/sign_in" , class: "account__login--link" %> 50 </div> 51 <% end %> 52 </div> 53 </div> 54 </header> 55 <%= yield %> 56 </body> 57</html>

CREATE

1CREATE TABLE `recipis` ( 2 `id` bigint(20) NOT NULL AUTO_INCREMENT, 3 `user_id` bigint(20) DEFAULT NULL, 4 `title` varchar(255) DEFAULT NULL, 5 `content` text, 6 `image` varchar(255) DEFAULT NULL, 7 `created_at` datetime NOT NULL, 8 `updated_at` datetime NOT NULL, 9 PRIMARY KEY (`id`), 10 KEY `index_recipis_on_user_id` (`user_id`), 11 CONSTRAINT `fk_rails_3415415cc3` FOREIGN KEY (`user_id`) REFERENCES `users` (`id`) 12) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;### Ruby

何卒宜しくお願い致します。

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

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

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

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

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

m.ts10806

2020/05/04 00:28

文章とコードブロックが逆です。
m.ts10806

2020/05/04 00:29

>mysqlにて テーブル定義と実際のデータをSQLで(CREATE TABLEとINSERT)で提示してください。
Naoto1

2020/05/04 00:45

質問の更新致しました。 INSERTのみ記載できておりません。 理解力が乏しく申し訳ございません。。。
m.ts10806

2020/05/04 00:49

おそらくteratailの投稿バグだと思います。反映されていません。 >理解力が乏しく 謝る必要はありません。人それぞれです。1つずつやっていきましょう。
Naoto1

2020/05/04 01:10

質問、編集してみました。 ご対応お願い致します!
guest

回答1

0

ベストアンサー

<%= r.image %>は正常にURLが取得できていますか?

style= "background-image: url(<%= r.image %>);"
のstyle=後ろのスペースを消したらどうでしょうか?

あとは
style="background: url(<%= r.image %>);"
にしてみたらどうなりますか?

投稿2020/05/04 05:06

gnfreeworks

総合スコア306

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問