teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問投稿した画像をimage_tag もしくはurl_forを使って背景に表示させたい。

編集履歴

質問編集履歴

12

追記、エラー発生

2020/11/15 03:22

投稿

yutaro_0529
yutaro_0529

スコア12

title CHANGED
File without changes
body CHANGED
@@ -21,8 +21,7 @@
21
21
 
22
22
  ➡︎このコードだと画像が表示されない<div class="content_post" style="background-image: url(<%= image_tag item.image %>) ;">
23
23
  ➡︎このコードだとエラーが発生<%# <div class="content_post" style="background-image: url(<%= Rails.application.routes.url_helpers.url_for(item.image) if item.image.attached? %>
24
- <%# <%= image_tag item.image ,class: 'item-image' if item.image.attached? %>
24
+
25
- <%# <%= image_tag message.image, class: 'message-image' if message.image.attached? %>
26
25
  ➡︎このコードだとエラーが発生（NoMethodError in Users#show）<div class="content_post" style="background-image: url(<%= url_for(item.image.url)=%>
27
26
  <div class="more">
28
27
  <span><%= image_tag 'arrow_top.png'%></span>
@@ -65,13 +64,9 @@
65
64
  undefined method `url' for #<ActiveStorage::Attached::One:0x00007fc948e1ff28>
66
65
  Extracted source (around line #1):
67
66
 
68
-
69
67
  <div class="content_post" style="background-image: url(<%= url_for(item.image.url)=%>
70
68
  <%= image_tag item.image.variant(resize: '500x500'), class: 'item-image' if item.image.attached? %>
71
69
  <%= image_tag message.image, class: 'message-image' if message.image.attached? %>
72
- <%# attached?メソッド レコードにファイルが添付されているかどうか モデル.ファイル名.attached? %>
73
- <%# image_tagメソッド img要素を生成するRailsのヘルパーメソッド %>
74
- <%# image_tagメソッドでは、複雑なRailsのディレクトリパスを指定しなくても、モデルから画像ファイルを呼び出して引数に記述するだけで、画像を表示するimg要素を生成 %>
75
70
 
76
71
  Trace of template inclusion: #<ActionView::Template app/views/users/show.html.erb locals=[]>
77
72
 
@@ -84,8 +79,6 @@
84
79
  Request
85
80
  Parameters:
86
81
  ```
87
-
88
-
89
82
  https://gyazo.com/17411c4b60fe029ecbe7f89f2b7156e2
90
83
 
91
84
  ### 試したこと
@@ -122,7 +115,6 @@
122
115
  app/views/items/index.html.erb:6:in `each'
123
116
  app/views/items/index.html.erb:6
124
117
 
125
-
126
118
  ➡︎2パターン目image_pathを使った場合
127
119
  Sprockets::Rails::Helper::AssetNotFound in Items#index
128
120
  Showing /Users/uraokayuutarou/projects/nostalgia/app/views/items/_item.html.erb where line #1 raised:
@@ -133,10 +125,7 @@
133
125
 
134
126
  <div class="content_post" style="background-image: url(<%= image_path item.image %>) ;">
135
127
  <%# <div class="content_post" style="background-image: url(<%= Rails.application.routes.url_helpers.url_for(item.image) if item.image.attached? %>
136
- <%# <%= image_tag item.image ,class: 'item-image' if item.image.attached? %>
128
+
137
- <%# <%= image_tag message.image, class: 'message-image' if message.image.attached? %>
138
- <%# attached?メソッド レコードにファイルが添付されているかどうか モデル.ファイル名.attached? %>
139
- <%# image_tagメソッド img要素を生成するRailsのヘルパーメソッド %>
140
129
 
141
130
  Trace of template inclusion: #<ActionView::Template app/views/items/index.html.erb locals=[]>
142
131
 
@@ -214,6 +203,14 @@
214
203
  app/views/items/index.html.erb:6:in `each'
215
204
  app/views/items/index.html.erb:6
216
205
 
206
+ ➡︎6パターン目<div class="content_post" style="background-image: url(<%= url_for(item.image) ,class: 'item-image' if item.image.attached? %>
207
+ 上記のコードでエラーが発生しました。
208
+
209
+ エラースクリーンショット
210
+ https://gyazo.com/f1fe843012299d2dc4ec19060bf82905
211
+ 続き
212
+ https://gyazo.com/e89d008392120fa0a804ff47f8a90bf3
213
+
217
214
  ```
218
215
  補足
219
216
  ```
@@ -231,8 +228,17 @@
231
228
  secret_access_key: <%= ENV['AWS_SECRET_ACCESS_KEY'] %>
232
229
  region: ap-northeast-1
233
230
  bucket: 自身のバケット名
231
+
232
+ 環境設定
233
+ config/enviloment/developments.rb
234
+ 最後の記述
235
+ # default_url_options[:host] = "localhost:3000"
236
+ host = 'samplehost'
237
+ Rails.application.routes.default_url_options[:host] = host
238
+ #おそらく本番環境productionにも定義
239
+ ここを記載してlocalでは表示させることが出来ました。
240
+ url_forメソッドを使用して
234
241
  ```
235
-
236
242
  追記11/6 20:42
237
243
  1)S3にsaveできたというのは、WEBページのAWSのS３のオブジェクトで確認しました。
238
244
  2)item_params の中身 => <ActionController::Parameters {"text"=>"パンツ", "image"=>#<ActionDispatch::Http::UploadedFile:0x00007fefc2b84c78 @tempfile=#<Tempfile:/var/folders/qp/vfswzv852_x8zy3q27gp1gt00000gn/T/RackMultipart20201106-6566-1l80iav.png>, @original_filename="スクリーンショット 2020-11-06 19.46.55.png", @content_type="image/png", @headers="Content-Disposition: form-data; name=\"item[image]\"; filename=\"\xE3\x82\xB9\xE3\x82\xAF\xE3\x83\xAA\xE3\x83\xBC\xE3\x83\xB3\xE3\x82\xB7\xE3\x83\xA7\xE3\x83\x83\xE3\x83\x88 2020-11-06 19.46.55.png\"\r\nContent-Type: image/png\r\n">, "user_id"=>1} permitted: true>

11

タイトルの変更

2020/11/15 03:22

投稿

yutaro_0529
yutaro_0529

スコア12

title CHANGED
@@ -1,1 +1,1 @@
1
- S3に画像を保存することが出来たのですが、画像が表示されない。url(<%= image_tag item.image %>) ;
1
+ 投稿した画像をimage_tag もしくはurl_forを使って背景に表示させたい。
body CHANGED
File without changes

10

修正後のコードとエラー

2020/11/13 06:18

投稿

yutaro_0529
yutaro_0529

スコア12

title CHANGED
File without changes
body CHANGED
@@ -1,17 +1,16 @@
1
1
  ### 前提・実現したいこと
2
+ Ruby on railsで画像が投稿できるようなシステムを作っています。
3
+ 画像を背景に表示させたい。
2
4
 
3
-
4
- （例）Ruby on railsで画像が投稿できるようなシステムを作っています。
5
- 画像を表示させたい。
6
-
7
5
  ### 発生している問題・エラーメッセージ
8
6
 
9
- まずactive storageに投稿した画像を保存し表示できるように出来ました。
7
+ active storageに投稿した画像を保存し表示できるように出来ました。
10
- 次にAWSのS3に投稿して画像を保存して表示させようとすると、エラーが発生し、
8
+ その後、AWSのS3に投稿して画像を保存して表示させようとすると、エラーが発生し、
11
9
  HTMLの記述を修正しました。
12
10
 
13
- 画像データが正常に送られているのがわかるのですが、
11
+ 画像データがレコードには正常に送られているのがわかるのですが、
14
- 画像が表示されず、困っています。
12
+ 画像が表示されず困っています。
13
+ _item.html.erbの画像を表示させるコードに問題があると思います。
15
14
 
16
15
  ### 該当のソースコード
17
16
 
@@ -21,10 +20,10 @@
21
20
  <code>
22
21
 
23
22
  ➡︎このコードだと画像が表示されない<div class="content_post" style="background-image: url(<%= image_tag item.image %>) ;">
24
- ➡︎このコードだとエラーが発生<%# <div class="content_post" style="background-image: url(<%= Rails.apコーフ度plication.routes.url_helpers.url_for(item.image) if item.image.attached? %>
23
+ ➡︎このコードだとエラーが発生<%# <div class="content_post" style="background-image: url(<%= Rails.application.routes.url_helpers.url_for(item.image) if item.image.attached? %>
25
24
  <%# <%= image_tag item.image ,class: 'item-image' if item.image.attached? %>
26
25
  <%# <%= image_tag message.image, class: 'message-image' if message.image.attached? %>
27
-
26
+ ➡︎このコードだとエラーが発生（NoMethodError in Users#show）<div class="content_post" style="background-image: url(<%= url_for(item.image.url)=%>
28
27
  <div class="more">
29
28
  <span><%= image_tag 'arrow_top.png'%></span>
30
29
  <ul class="more_list">
@@ -56,17 +55,39 @@
56
55
  </div>
57
56
  >　
58
57
 
58
+ ```
59
59
  ➡︎エラー内容
60
+ ```
61
+
60
- ActionView::SyntaxErrorInTemplate in ItemsController#index
62
+ NoMethodError in Users#show
63
+ Showing /Users/uraokayuutarou/projects/nostalgia/app/views/items/_item.html.erb where line #1 raised:
64
+
65
+ undefined method `url' for #<ActiveStorage::Attached::One:0x00007fc948e1ff28>
61
- Extracted source (around line #3):
66
+ Extracted source (around line #1):
67
+
62
68
 
63
- <%# <div class="content_post" style="background-image: url(<%= image_tag item.image %>) ;"> %>
69
+ <div class="content_post" style="background-image: url(<%= url_for(item.image.url)=%>
64
- <div class="content_post" style="background-image: url(<%= Rails.application.routes.url_helpers.url_for(item.image) if item.image.attached?
70
+ <%= image_tag item.image.variant(resize: '500x500'), class: 'item-image' if item.image.attached? %>
65
- <%# <%= image_tag item.image ,class: 'item-image' if item.image.attached? %>
71
+ <%= image_tag message.image, class: 'message-image' if message.image.attached? %>
72
+ <%# attached?メソッド レコードにファイルが添付されているかどうか モデル.ファイル名.attached? %>
73
+ <%# image_tagメソッド img要素を生成するRailsのヘルパーメソッド %>
74
+ <%# image_tagメソッドでは、複雑なRailsのディレクトリパスを指定しなくても、モデルから画像ファイルを呼び出して引数に記述するだけで、画像を表示するimg要素を生成 %>
66
75
 
76
+ Trace of template inclusion: #<ActionView::Template app/views/users/show.html.erb locals=[]>
67
77
 
78
+ Rails.root: /Users/uraokayuutarou/projects/nostalgia
79
+
80
+ Application Trace | Framework Trace | Full Trace
81
+ app/views/items/_item.html.erb:1
82
+ app/views/users/show.html.erb:4
83
+ app/views/users/show.html.erb:3
84
+ Request
85
+ Parameters:
68
86
  ```
69
87
 
88
+
89
+ https://gyazo.com/17411c4b60fe029ecbe7f89f2b7156e2
90
+
70
91
  ### 試したこと
71
92
  ```
72
93
  app/veiws/veiws/_item.html.erb
@@ -161,10 +182,6 @@
161
182
 
162
183
  <div class="content_post" style="background-image: url(<%= item.image.url %>) ;">
163
184
  <%# <div class="content_post" style="background-image: url(<%= Rails.application.routes.url_helpers.url_for(item.image) if item.image.attached? %>
164
- <%# <%= image_tag item.image ,class: 'item-image' if item.image.attached? %>
165
- <%# <%= image_tag message.image, class: 'message-image' if message.image.attached? %>
166
- <%# attached?メソッド レコードにファイルが添付されているかどうか モデル.ファイル名.attached? %>
167
- <%# image_tagメソッド img要素を生成するRailsのヘルパーメソッド %>
168
185
 
169
186
  Trace of template inclusion: #<ActionView::Template app/views/items/index.html.erb locals=[]>
170
187
 
@@ -186,10 +203,6 @@
186
203
 
187
204
  <div class="content_post" style="background-image: url(' <%= image_tag(@item.image.url) %>') ;">
188
205
  <%# <div class="content_post" style="background-image: url(<%= Rails.application.routes.url_helpers.url_for(item.image) if item.image.attached? %>
189
- <%# <%= image_tag item.image ,class: 'item-image' if item.image.attached? %>
190
- <%# <%= image_tag message.image, class: 'message-image' if message.image.attached? %>
191
- <%# attached?メソッド レコードにファイルが添付されているかどうか モデル.ファイル名.attached? %>
192
- <%# image_tagメソッド img要素を生成するRailsのヘルパーメソッド %>
193
206
 
194
207
  Trace of template inclusion: #<ActionView::Template app/views/items/index.html.erb locals=[]>
195
208
 
@@ -202,7 +215,6 @@
202
215
  app/views/items/index.html.erb:6
203
216
 
204
217
  ```
205
-
206
218
  補足
207
219
  ```
208
220
  S3はバケットを作成して、バケットポリシーを編集、

9

質問の回答を編集して記載しました！

2020/11/13 05:38

投稿

yutaro_0529
yutaro_0529

スコア12

title CHANGED
File without changes
body CHANGED
@@ -1,14 +1,11 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- ここに質問の内容を詳しく書いてください。
3
+
4
4
  （例）Ruby on railsで画像が投稿できるようなシステムを作っています。
5
5
  画像を表示させたい。
6
6
 
7
7
  ### 発生している問題・エラーメッセージ
8
8
 
9
- エラーメッセージ
10
- ActionView::SyntaxErrorInTemplate in ItemsController#index
11
-
12
9
  まずactive storageに投稿した画像を保存し表示できるように出来ました。
13
10
  次にAWSのS3に投稿して画像を保存して表示させようとすると、エラーが発生し、
14
11
  HTMLの記述を修正しました。
@@ -16,8 +13,6 @@
16
13
  画像データが正常に送られているのがわかるのですが、
17
14
  画像が表示されず、困っています。
18
15
 
19
-
20
-
21
16
  ### 該当のソースコード
22
17
 
23
18
  ```Ruby on rails
@@ -29,9 +24,7 @@
29
24
  ➡︎このコードだとエラーが発生<%# <div class="content_post" style="background-image: url(<%= Rails.apコーフ度plication.routes.url_helpers.url_for(item.image) if item.image.attached? %>
30
25
  <%# <%= image_tag item.image ,class: 'item-image' if item.image.attached? %>
31
26
  <%# <%= image_tag message.image, class: 'message-image' if message.image.attached? %>
32
- <%# attached?メソッド レコードにファイルが添付されているかどうか モデル.ファイル名.attached? %>
27
+
33
- <%# image_tagメソッド img要素を生成するRailsのヘルパーメソッド %>
34
- <%# image_tagメソッドでは、複雑なRailsのディレクトリパスを指定しなくても、モデルから画像ファイルを呼び出して引数に記述するだけで、画像を表示するimg要素を生成 %>
35
28
  <div class="more">
36
29
  <span><%= image_tag 'arrow_top.png'%></span>
37
30
  <ul class="more_list">
@@ -72,8 +65,6 @@
72
65
  <%# <%= image_tag item.image ,class: 'item-image' if item.image.attached? %>
73
66
 
74
67
 
75
-
76
-
77
68
  ```
78
69
 
79
70
  ### 試したこと
@@ -185,7 +176,6 @@
185
176
  app/views/items/index.html.erb:6:in `each'
186
177
  app/views/items/index.html.erb:6
187
178
 
188
-
189
179
  ➡︎5パターン目@item.image.urlを使った場合
190
180
 
191
181
  NoMethodError in Items#index
@@ -193,8 +183,7 @@
193
183
 
194
184
  undefined method `image' for nil:NilClass
195
185
  Extracted source (around line #1):
196
-
197
-
186
+
198
187
  <div class="content_post" style="background-image: url(' <%= image_tag(@item.image.url) %>') ;">
199
188
  <%# <div class="content_post" style="background-image: url(<%= Rails.application.routes.url_helpers.url_for(item.image) if item.image.attached? %>
200
189
  <%# <%= image_tag item.image ,class: 'item-image' if item.image.attached? %>
@@ -212,28 +201,10 @@
212
201
  app/views/items/index.html.erb:6:in `each'
213
202
  app/views/items/index.html.erb:6
214
203
 
215
-
216
-
217
-
218
204
  ```
219
205
 
220
206
  補足
221
207
  ```
222
- app/controller/items.controller.rb
223
-
224
- def create
225
- # Item.create(item_params)
226
- # binding.pry
227
- item =Item.new(item_params)
228
- if item.save
229
- redirect_to root_path
230
- else
231
- render "item/new"
232
- end
233
- # アイテムモデル保存する
234
- # praivateでitem_paramsで引用してくるものを指定
235
- end
236
-
237
208
  S3はバケットを作成して、バケットポリシーを編集、
238
209
  Gemfieにgem "aws-sdk-s3", require: falseをbundle installしました。
239
210
  その後config/enviroments/delopment.rbにconfig.active_storage.service = :amazonにlocalから変更。
@@ -248,4 +219,10 @@
248
219
  secret_access_key: <%= ENV['AWS_SECRET_ACCESS_KEY'] %>
249
220
  region: ap-northeast-1
250
221
  bucket: 自身のバケット名
251
- ```
222
+ ```
223
+
224
+ 追記11/6 20:42
225
+ 1)S3にsaveできたというのは、WEBページのAWSのS３のオブジェクトで確認しました。
226
+ 2)item_params の中身 => <ActionController::Parameters {"text"=>"パンツ", "image"=>#<ActionDispatch::Http::UploadedFile:0x00007fefc2b84c78 @tempfile=#<Tempfile:/var/folders/qp/vfswzv852_x8zy3q27gp1gt00000gn/T/RackMultipart20201106-6566-1l80iav.png>, @original_filename="スクリーンショット 2020-11-06 19.46.55.png", @content_type="image/png", @headers="Content-Disposition: form-data; name=\"item[image]\"; filename=\"\xE3\x82\xB9\xE3\x82\xAF\xE3\x83\xAA\xE3\x83\xBC\xE3\x83\xB3\xE3\x82\xB7\xE3\x83\xA7\xE3\x83\x83\xE3\x83\x88 2020-11-06 19.46.55.png\"\r\nContent-Type: image/png\r\n">, "user_id"=>1} permitted: true>
227
+ 3)item modelの定義
228
+ params.require(:item).permit(:text, :image ).merge(user_id: current_user.id

8

➡︎5パターン目@item.image.urlを使った場合を追記

2020/11/06 11:50

投稿

yutaro_0529
yutaro_0529

スコア12

title CHANGED
File without changes
body CHANGED
@@ -186,9 +186,35 @@
186
186
  app/views/items/index.html.erb:6
187
187
 
188
188
 
189
+ ➡︎5パターン目@item.image.urlを使った場合
189
190
 
191
+ NoMethodError in Items#index
192
+ Showing /Users/uraokayuutarou/projects/nostalgia/app/views/items/_item.html.erb where line #1 raised:
190
193
 
194
+ undefined method `image' for nil:NilClass
195
+ Extracted source (around line #1):
191
196
 
197
+
198
+ <div class="content_post" style="background-image: url(' <%= image_tag(@item.image.url) %>') ;">
199
+ <%# <div class="content_post" style="background-image: url(<%= Rails.application.routes.url_helpers.url_for(item.image) if item.image.attached? %>
200
+ <%# <%= image_tag item.image ,class: 'item-image' if item.image.attached? %>
201
+ <%# <%= image_tag message.image, class: 'message-image' if message.image.attached? %>
202
+ <%# attached?メソッド レコードにファイルが添付されているかどうか モデル.ファイル名.attached? %>
203
+ <%# image_tagメソッド img要素を生成するRailsのヘルパーメソッド %>
204
+
205
+ Trace of template inclusion: #<ActionView::Template app/views/items/index.html.erb locals=[]>
206
+
207
+ Rails.root: /Users/uraokayuutarou/projects/nostalgia
208
+
209
+ Application Trace | Framework Trace | Full Trace
210
+ app/views/items/_item.html.erb:1
211
+ app/views/items/index.html.erb:7
212
+ app/views/items/index.html.erb:6:in `each'
213
+ app/views/items/index.html.erb:6
214
+
215
+
216
+
217
+
192
218
  ```
193
219
 
194
220
  補足

7

item.image.urlを使った場合のエラー

2020/11/06 07:38

投稿

yutaro_0529
yutaro_0529

スコア12

title CHANGED
File without changes
body CHANGED
@@ -161,11 +161,34 @@
161
161
  app/views/items/index.html.erb:6:in `each'
162
162
  app/views/items/index.html.erb:6
163
163
 
164
- ➡︎4パターン目を使った場合
164
+ ➡︎4パターン目をitem.image.url使った場合
165
+ NoMethodError in Items#index
166
+ Showing /Users/uraokayuutarou/projects/nostalgia/app/views/items/_item.html.erb where line #1 raised:
165
167
 
168
+ undefined method `url' for #<ActiveStorage::Attached::One:0x00007fee7f6197c8>
169
+ Extracted source (around line #1):
170
+
171
+ <div class="content_post" style="background-image: url(<%= item.image.url %>) ;">
172
+ <%# <div class="content_post" style="background-image: url(<%= Rails.application.routes.url_helpers.url_for(item.image) if item.image.attached? %>
173
+ <%# <%= image_tag item.image ,class: 'item-image' if item.image.attached? %>
174
+ <%# <%= image_tag message.image, class: 'message-image' if message.image.attached? %>
175
+ <%# attached?メソッド レコードにファイルが添付されているかどうか モデル.ファイル名.attached? %>
176
+ <%# image_tagメソッド img要素を生成するRailsのヘルパーメソッド %>
166
177
 
178
+ Trace of template inclusion: #<ActionView::Template app/views/items/index.html.erb locals=[]>
167
179
 
180
+ Rails.root: /Users/uraokayuutarou/projects/nostalgia
168
181
 
182
+ Application Trace | Framework Trace | Full Trace
183
+ app/views/items/_item.html.erb:1
184
+ app/views/items/index.html.erb:7
185
+ app/views/items/index.html.erb:6:in `each'
186
+ app/views/items/index.html.erb:6
187
+
188
+
189
+
190
+
191
+
169
192
  ```
170
193
 
171
194
  補足

6

item.image.pathを使用後、エラー

2020/11/06 07:17

投稿

yutaro_0529
yutaro_0529

スコア12

title CHANGED
File without changes
body CHANGED
@@ -136,10 +136,36 @@
136
136
  app/views/items/index.html.erb:6:in `each'
137
137
  app/views/items/index.html.erb:6
138
138
 
139
- ➡︎3パターン目を使った場合
139
+ ➡︎3パターン目をitem.image.path使った場合
140
140
 
141
+ NoMethodError in Items#index
142
+ Showing /Users/uraokayuutarou/projects/nostalgia/app/views/items/_item.html.erb where line #1 raised:
141
143
 
144
+ undefined method `path' for #<ActiveStorage::Attached::One:0x00007fee7e66ff70>
145
+ Extracted source (around line #1):
146
+
147
+ <div class="content_post" style="background-image: url(<%= item.image.path %>) ;">
148
+ <%# <div class="content_post" style="background-image: url(<%= Rails.application.routes.url_helpers.url_for(item.image) if item.image.attached? %>
149
+ <%# <%= image_tag item.image ,class: 'item-image' if item.image.attached? %>
150
+ <%# <%= image_tag message.image, class: 'message-image' if message.image.attached? %>
151
+ <%# attached?メソッド レコードにファイルが添付されているかどうか モデル.ファイル名.attached? %>
152
+ <%# image_tagメソッド img要素を生成するRailsのヘルパーメソッド %>
142
153
 
154
+ Trace of template inclusion: #<ActionView::Template app/views/items/index.html.erb locals=[]>
155
+
156
+ Rails.root: /Users/uraokayuutarou/projects/nostalgia
157
+
158
+ Application Trace | Framework Trace | Full Trace
159
+ app/views/items/_item.html.erb:1
160
+ app/views/items/index.html.erb:7
161
+ app/views/items/index.html.erb:6:in `each'
162
+ app/views/items/index.html.erb:6
163
+
164
+ ➡︎4パターン目を使った場合
165
+
166
+
167
+
168
+
143
169
  ```
144
170
 
145
171
  補足

5

エラーの詳細を追記

2020/11/06 07:15

投稿

yutaro_0529
yutaro_0529

スコア12

title CHANGED
File without changes
body CHANGED
@@ -86,19 +86,60 @@
86
86
 
87
87
  <div class="content_post" style="background-image: url(<%= image_url item.image %>) ;">
88
88
 
89
- ➡︎エラー発生
89
+ ➡︎1パターン目image_urlを使った場合
90
90
  Sprockets::Rails::Helper::AssetNotFound in Items#index
91
+ Showing /Users/uraokayuutarou/projects/nostalgia/app/views/items/_item.html.erb where line #1 raised:
91
92
 
93
+ The asset "" is not present in the asset pipeline.
94
+ Extracted source (around line #1):
95
+
92
- <div class="content_post" style="background-image: url(<%= image_path item.image %>) ;">
96
+ <div class="content_post" style="background-image: url(<%= image_url item.image %>) ;">
97
+ <%# <div class="content_post" style="background-image: url(<%= Rails.application.routes.url_helpers.url_for(item.image) if item.image.attached? %>
98
+ <%# <%= image_tag item.image ,class: 'item-image' if item.image.attached? %>
99
+ <%# <%= image_tag message.image, class: 'message-image' if message.image.attached? %>
100
+ <%# attached?メソッド レコードにファイルが添付されているかどうか モデル.ファイル名.attached? %>
101
+ <%# image_tagメソッド img要素を生成するRailsのヘルパーメソッド %>
93
102
 
103
+ Trace of template inclusion: #<ActionView::Template app/views/items/index.html.erb locals=[]>
104
+
105
+ Rails.root: /Users/uraokayuutarou/projects/nostalgia
106
+
107
+ Application Trace | Framework Trace | Full Trace
108
+ app/views/items/_item.html.erb:1
109
+ app/views/items/index.html.erb:7
110
+ app/views/items/index.html.erb:6:in `each'
111
+ app/views/items/index.html.erb:6
112
+
113
+
94
- ➡︎エラー発生
114
+ ➡︎2パターン目image_pathを使った場合
95
115
  Sprockets::Rails::Helper::AssetNotFound in Items#index
116
+ Showing /Users/uraokayuutarou/projects/nostalgia/app/views/items/_item.html.erb where line #1 raised:
96
117
 
118
+ The asset "" is not present in the asset pipeline.
119
+ Extracted source (around line #1):
120
+
97
121
 
122
+ <div class="content_post" style="background-image: url(<%= image_path item.image %>) ;">
123
+ <%# <div class="content_post" style="background-image: url(<%= Rails.application.routes.url_helpers.url_for(item.image) if item.image.attached? %>
124
+ <%# <%= image_tag item.image ,class: 'item-image' if item.image.attached? %>
125
+ <%# <%= image_tag message.image, class: 'message-image' if message.image.attached? %>
126
+ <%# attached?メソッド レコードにファイルが添付されているかどうか モデル.ファイル名.attached? %>
127
+ <%# image_tagメソッド img要素を生成するRailsのヘルパーメソッド %>
98
128
 
129
+ Trace of template inclusion: #<ActionView::Template app/views/items/index.html.erb locals=[]>
99
130
 
131
+ Rails.root: /Users/uraokayuutarou/projects/nostalgia
100
132
 
133
+ Application Trace | Framework Trace | Full Trace
134
+ app/views/items/_item.html.erb:1
135
+ app/views/items/index.html.erb:7
136
+ app/views/items/index.html.erb:6:in `each'
137
+ app/views/items/index.html.erb:6
101
138
 
139
+ ➡︎3パターン目を使った場合
140
+
141
+
142
+
102
143
  ```
103
144
 
104
145
  補足
@@ -117,4 +158,19 @@
117
158
  # アイテムモデル保存する
118
159
  # praivateでitem_paramsで引用してくるものを指定
119
160
  end
161
+
162
+ S3はバケットを作成して、バケットポリシーを編集、
163
+ Gemfieにgem "aws-sdk-s3", require: falseをbundle installしました。
164
+ その後config/enviroments/delopment.rbにconfig.active_storage.service = :amazonにlocalから変更。
165
+
166
+ 次に「パブリックアクセスをすべてブロック」のチェックを外す。
167
+ 新規のパブリックバケットポリシー,任意のバケットポリシーにチェックを入れました。
168
+
169
+ config/storage.ymlに追記
170
+ amazon:
171
+ service: S3
172
+ access_key_id: <%= ENV['AWS_ACCESS_KEY_ID'] %>
173
+ secret_access_key: <%= ENV['AWS_SECRET_ACCESS_KEY'] %>
174
+ region: ap-northeast-1
175
+ bucket: 自身のバケット名
120
176
  ```

4

image_pathでトライ

2020/11/06 07:13

投稿

yutaro_0529
yutaro_0529

スコア12

title CHANGED
File without changes
body CHANGED
@@ -89,9 +89,16 @@
89
89
  ➡︎エラー発生
90
90
  Sprockets::Rails::Helper::AssetNotFound in Items#index
91
91
 
92
+ <div class="content_post" style="background-image: url(<%= image_path item.image %>) ;">
92
93
 
94
+ ➡︎エラー発生
95
+ Sprockets::Rails::Helper::AssetNotFound in Items#index
93
96
 
94
97
 
98
+
99
+
100
+
101
+
95
102
  ```
96
103
 
97
104
  補足

3

image_urlでトライ

2020/11/06 04:13

投稿

yutaro_0529
yutaro_0529

スコア12

title CHANGED
File without changes
body CHANGED
@@ -80,9 +80,18 @@
80
80
  ```
81
81
  app/veiws/veiws/_item.html.erb
82
82
 
83
+ <code>
83
84
  上記修正後のコード（）の中身 <div class="content_post" style="background-image: url(<%= image_tag item.image %>) ;">　
85
+ 画像が表示されず、エラーなし
84
86
 
87
+ <div class="content_post" style="background-image: url(<%= image_url item.image %>) ;">
85
88
 
89
+ ➡︎エラー発生
90
+ Sprockets::Rails::Helper::AssetNotFound in Items#index
91
+
92
+
93
+
94
+
86
95
  ```
87
96
 
88
97
  補足

2

質問修正

2020/11/06 04:11

投稿

yutaro_0529
yutaro_0529

スコア12

title CHANGED
File without changes
body CHANGED
@@ -6,10 +6,12 @@
6
6
 
7
7
  ### 発生している問題・エラーメッセージ
8
8
 
9
+ エラーメッセージ
10
+ ActionView::SyntaxErrorInTemplate in ItemsController#index
9
11
 
10
12
  まずactive storageに投稿した画像を保存し表示できるように出来ました。
11
- 次にAWSのS3に投稿して画像を保存して表示させようとすると、エラー（）が発生し、
13
+ 次にAWSのS3に投稿して画像を保存して表示させようとすると、エラーが発生し、
12
- HTMLの記述を修正（）しました。
14
+ HTMLの記述を修正しました。
13
15
 
14
16
  画像データが正常に送られているのがわかるのですが、
15
17
  画像が表示されず、困っています。
@@ -21,8 +23,57 @@
21
23
  ```Ruby on rails
22
24
  app/veiws/veiws/_item.html.erb
23
25
 
24
- 上記エラーコード（）の中身 <%# <div class="content_post" style="background-image: url(<%= Rails.application.routes.url_helpers.url_for(item.image) if item.image.attached? %>　
26
+ <code>
25
27
 
28
+ ➡︎このコードだと画像が表示されない<div class="content_post" style="background-image: url(<%= image_tag item.image %>) ;">
29
+ ➡︎このコードだとエラーが発生<%# <div class="content_post" style="background-image: url(<%= Rails.apコーフ度plication.routes.url_helpers.url_for(item.image) if item.image.attached? %>
30
+ <%# <%= image_tag item.image ,class: 'item-image' if item.image.attached? %>
31
+ <%# <%= image_tag message.image, class: 'message-image' if message.image.attached? %>
32
+ <%# attached?メソッド レコードにファイルが添付されているかどうか モデル.ファイル名.attached? %>
33
+ <%# image_tagメソッド img要素を生成するRailsのヘルパーメソッド %>
34
+ <%# image_tagメソッドでは、複雑なRailsのディレクトリパスを指定しなくても、モデルから画像ファイルを呼び出して引数に記述するだけで、画像を表示するimg要素を生成 %>
35
+ <div class="more">
36
+ <span><%= image_tag 'arrow_top.png'%></span>
37
+ <ul class="more_list">
38
+ <li>
39
+ <%= link_to '詳細', item_path(item.id), method: :get%>
40
+ </li>
41
+ <% if user_signed_in? && current_user.id == item.user_id %>
42
+ <li>
43
+ <%= link_to '削除', item_path(item.id), method: :delete %>
44
+ </li>
45
+ <%# Prefixの引数 %>
46
+ <%# アイテムのID（item.id） %>
47
+ <%# HTTPメソッドは、DELETEというHTTPメソッド %>
48
+ <%# methodオプションにシンボルで:delete %>
49
+ <li>
50
+ <%= link_to '編集',edit_item_path(item.id), method: :get %>
51
+ <%# get サーバーからブラウザに情報を返す。単にウェブサイトを閲覧する際など、情報を取得するために利用される。 %>
52
+ <%# Prefixでパスを確認 %>
53
+ </li>
54
+ <% end %>
55
+ </ul>
56
+ </div>
57
+ <p><%= item.text %></p>
58
+ <span class="name">
59
+ <a href="/users/<%= item.user.id %>">
60
+ <span>投稿者</span><%= item.user.nickname %>
61
+ </a>
62
+ </span>
63
+ </div>
64
+ >　
65
+
66
+ ➡︎エラー内容
67
+ ActionView::SyntaxErrorInTemplate in ItemsController#index
68
+ Extracted source (around line #3):
69
+
70
+ <%# <div class="content_post" style="background-image: url(<%= image_tag item.image %>) ;"> %>
71
+ <div class="content_post" style="background-image: url(<%= Rails.application.routes.url_helpers.url_for(item.image) if item.image.attached?
72
+ <%# <%= image_tag item.image ,class: 'item-image' if item.image.attached? %>
73
+
74
+
75
+
76
+
26
77
  ```
27
78
 
28
79
  ### 試したこと
@@ -30,6 +81,8 @@
30
81
  app/veiws/veiws/_item.html.erb
31
82
 
32
83
  上記修正後のコード（）の中身 <div class="content_post" style="background-image: url(<%= image_tag item.image %>) ;">　
84
+
85
+
33
86
  ```
34
87
 
35
88
  補足

1

controllerの追記

2020/11/06 04:07

投稿

yutaro_0529
yutaro_0529

スコア12

title CHANGED
File without changes
body CHANGED
@@ -19,11 +19,33 @@
19
19
  ### 該当のソースコード
20
20
 
21
21
  ```Ruby on rails
22
+ app/veiws/veiws/_item.html.erb
23
+
22
24
  上記エラーコード（）の中身 <%# <div class="content_post" style="background-image: url(<%= Rails.application.routes.url_helpers.url_for(item.image) if item.image.attached? %>　
23
25
 
24
26
  ```
25
27
 
26
28
  ### 試したこと
27
29
  ```
30
+ app/veiws/veiws/_item.html.erb
31
+
28
32
  上記修正後のコード（）の中身 <div class="content_post" style="background-image: url(<%= image_tag item.image %>) ;">　
33
+ ```
34
+
35
+ 補足
36
+ ```
37
+ app/controller/items.controller.rb
38
+
39
+ def create
40
+ # Item.create(item_params)
41
+ # binding.pry
42
+ item =Item.new(item_params)
43
+ if item.save
44
+ redirect_to root_path
45
+ else
46
+ render "item/new"
47
+ end
48
+ # アイテムモデル保存する
49
+ # praivateでitem_paramsで引用してくるものを指定
50
+ end
29
51
  ```