teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問javascript 内で画像参照 404 エラー

編集履歴

質問編集履歴

8

質問内容の修正

2018/12/11 06:52

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -120,27 +120,37 @@
120
120
 
121
121
 
122
122
 
123
- https://qiita.com/Kumassy/items/1fd8c0c12cf054e4c4dc
123
+ [Rails4のProduction環境でのAsset Pipelineで躓いたので検証した](https://qiita.com/Kumassy/items/1fd8c0c12cf054e4c4dc)
124
124
 
125
125
 
126
126
 
127
127
  根本的な原因はこれと同じ現象な気がします
128
128
 
129
+
130
+
129
131
  JS から画像エラーが出る理由は謎のままですが
130
132
 
131
133
  CSS の url('images/spritesheet.png') が原因であるとすると
132
134
 
135
+
136
+
133
137
  assets 内から require してしまうと assets/application.css に統合されて
134
138
 
135
- images/* をよぶので assets/images/* を参照にいってしまう
139
+ その中で images/* をよぶので assets/images/* を参照にいってしまう
136
140
 
141
+
142
+
137
- public/assets/ はデプロイ時に消去されるので前持っておくこともできないし
143
+ public/assets/ はデプロイ時に消去されるので前持っておいておくこともできない
144
+
145
+
138
146
 
139
147
  プリコンパイルに画像ファイルをまぜてもサフィックスが付いて名前が変わってしまう
140
148
 
141
149
 
142
150
 
151
+ なのでそのサイトのように public 直下の絶対パスに書き換えるか
152
+
143
- なのでそのサイトのように絶対パスに書き換えるかサフィックスのつかないプリコンパイラをいれるしかない？
153
+ サフィックスのつかないプリコンパイラをいれるしかない？
144
154
 
145
155
 
146
156
 

7

質問内容の修正

2018/12/11 06:52

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -146,4 +146,6 @@
146
146
 
147
147
  Rails ガイドが推奨してる
148
148
 
149
- 「外部ライブラリは vendor/assets におくというのがそもそもよくないんでしょうか…
149
+ 「外部ライブラリは vendor/assets におく」
150
+
151
+ というのがそもそもよくないんでしょうか…

6

質問内容の修正

2018/12/11 06:41

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -126,10 +126,24 @@
126
126
 
127
127
  根本的な原因はこれと同じ現象な気がします
128
128
 
129
- ただパスをかきかえようにも参照してる場所がわからない…
129
+ JS から画像エラーが出る理由は謎のままですが
130
+
131
+ CSS の url('images/spritesheet.png') が原因であるとすると
132
+
133
+ assets 内から require してしまうと assets/application.css に統合されて
134
+
135
+ images/* をよぶので assets/images/* を参照にいってしまう
136
+
137
+ public/assets/ はデプロイ時に消去されるので前持っておくこともできないし
138
+
139
+ プリコンパイルに画像ファイルをまぜてもサフィックスが付いて名前が変わってしまう
130
140
 
131
141
 
132
142
 
133
- Rails ガイドが推奨してる外部ライブラリは
143
+ なのでそのサイトのように絶対パスに書き換えるかサフィックスのつかないプリコンパイラをいれるしかない？
134
144
 
145
+
146
+
147
+ Rails ガイドが推奨してる
148
+
135
- vendor/assets におくというのがそもそもよくないんでしょうか…
149
+ 「外部ライブラリは vendor/assets におくというのがそもそもよくないんでしょうか…

5

質問内容の修正

2018/12/11 06:40

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -42,6 +42,84 @@
42
42
 
43
43
 
44
44
 
45
+ vendor/assets/leaflet/ 以下に leaflet 関連の JS CSS を配置
46
+
47
+ ```
48
+
49
+ MarkerCluster.Default.css leaflet-search.js leaflet-src.esm.js leaflet.draw.css leaflet.markercluster.js
50
+
51
+ MarkerCluster.css leaflet-search.min.css leaflet-src.esm.js.map leaflet.draw.js leaflet.markercluster.js.map
52
+
53
+ easy-button.css leaflet-search.min.js leaflet-src.js leaflet.js
54
+
55
+ easy-button.js leaflet-search.mobile.min.css leaflet-src.js.map leaflet.js.map
56
+
57
+ images leaflet-search.mobile.src.css leaflet.css leaflet.markercluster-src.js
58
+
59
+ leaflet-search.css leaflet-search.src.css leaflet.draw-src.css leaflet.markercluster-src.js.map
60
+
61
+ ```
62
+
63
+
64
+
65
+ vendor/assets/leaflet/images/ に png svg 等を配置
66
+
67
+ ```
68
+
69
+ layers-2x.png layers.png marker-icon-2x.png marker-icon.png marker-shadow.png spritesheet-2x.png spritesheet.png spritesheet.svg
70
+
71
+ ```
72
+
73
+
74
+
75
+ app/assets/javascripts/application.js で
76
+
77
+ ```
78
+
79
+ //= require leaflet
80
+
81
+ //= require easy-button
82
+
83
+ //= require leaflet.draw
84
+
85
+ //= require leaflet.markercluster-src
86
+
87
+ ```
88
+
89
+
90
+
91
+ app/assets/stylesheets/application.css で
92
+
93
+ ```
94
+
95
+ //= require leaflet
96
+
97
+ //= require leaflet.draw
98
+
99
+ //= require leaflet-search
100
+
101
+ //= require easy-button
102
+
103
+ //= require MarkerCluster.Default
104
+
105
+ //= require MarkerCluster
106
+
107
+ ```
108
+
109
+
110
+
111
+ leaflet のバージョンは最新の 1.3.4
112
+
113
+ ほかライブラリも 11 月初旬の時点で最新のもの
114
+
115
+
116
+
117
+
118
+
119
+ 追記：
120
+
121
+
122
+
45
123
  https://qiita.com/Kumassy/items/1fd8c0c12cf054e4c4dc
46
124
 
47
125
 

4

質問内容の修正

2018/12/11 06:26

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -46,7 +46,9 @@
46
46
 
47
47
 
48
48
 
49
- これと同じ現象な気がします
49
+ 根本的な原因はこれと同じ現象な気がします
50
+
51
+ ただパスをかきかえようにも参照してる場所がわからない…
50
52
 
51
53
 
52
54
 

3

追記

2018/12/11 05:58

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -33,3 +33,23 @@
33
33
  Production 環境でしか発生しないためミニマイズされたソースを読み解くのも大変で
34
34
 
35
35
  ミニマイズされているソースのどの箇所が画像を参照しているか調べる方法はないでしょうか
36
+
37
+
38
+
39
+
40
+
41
+ 追記：
42
+
43
+
44
+
45
+ https://qiita.com/Kumassy/items/1fd8c0c12cf054e4c4dc
46
+
47
+
48
+
49
+ これと同じ現象な気がします
50
+
51
+
52
+
53
+ Rails ガイドが推奨してる外部ライブラリは
54
+
55
+ vendor/assets におくというのがそもそもよくないんでしょうか…

2

質問内容の修正

2018/12/11 05:35

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -20,9 +20,11 @@
20
20
 
21
21
  application-515d418457adc5a498c8d8ab9bc49944aef2885fab515db513ae693edef64790.js
22
22
 
23
- 中を文字列検索しても sprite.svg はヒットせず
23
+ 中を文字列検索しても spritesheet.svg はヒットせず
24
24
 
25
- リポジトリ内の sprite.svg という文字列で検索しても CSS しかヒットしません
25
+ リポジトリ内の spritesheet.svg という文字列で検索しても CSS しかヒットしません
26
+
27
+ CSS 内ではすべて url('images/spritesheet.png'); という形式でヒットします
26
28
 
27
29
  JSから参照エラーが出る理由がわからなくて困っています
28
30
 

1

質問内容の修正

2018/12/11 04:55

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -30,4 +30,4 @@
30
30
 
31
31
  Production 環境でしか発生しないためミニマイズされたソースを読み解くのも大変で
32
32
 
33
- ミニマイズされているソースのどの箇所が参照しているか調べる方法はないでしょうか
33
+ ミニマイズされているソースのどの箇所が画像を参照しているか調べる方法はないでしょうか