Q&A
sprite.svgではなくspritesheet.svg では？
leaflet というライブラリを
vendor/assets/ 以下において
app/assets/application.js から require で呼び出しているのですが
chrome の開発ツールで
application-515d418457adc5a498c8d8ab9bc49944aef2885fab515db513ae693edef64790.js:2 GET http://localhost:3000/assets/images/spritesheet.svg 404 (Not Found)
というエラーが出ます
プリコンパイルされている
application-515d418457adc5a498c8d8ab9bc49944aef2885fab515db513ae693edef64790.js
中を文字列検索しても spritesheet.svg はヒットせず
リポジトリ内の spritesheet.svg という文字列で検索しても CSS しかヒットしません
CSS 内ではすべて url('images/spritesheet.png'); という形式でヒットします
JSから参照エラーが出る理由がわからなくて困っています
Production 環境でしか発生しないためミニマイズされたソースを読み解くのも大変で
ミニマイズされているソースのどの箇所が画像を参照しているか調べる方法はないでしょうか
追記：
vendor/assets/leaflet/ 以下に leaflet 関連の JS CSS を配置
MarkerCluster.Default.css leaflet-search.js leaflet-src.esm.js leaflet.draw.css leaflet.markercluster.js MarkerCluster.css leaflet-search.min.css leaflet-src.esm.js.map leaflet.draw.js leaflet.markercluster.js.map easy-button.css leaflet-search.min.js leaflet-src.js leaflet.js easy-button.js leaflet-search.mobile.min.css leaflet-src.js.map leaflet.js.map images leaflet-search.mobile.src.css leaflet.css leaflet.markercluster-src.js leaflet-search.css leaflet-search.src.css leaflet.draw-src.css leaflet.markercluster-src.js.map
vendor/assets/leaflet/images/ に png svg 等を配置
layers-2x.png layers.png marker-icon-2x.png marker-icon.png marker-shadow.png spritesheet-2x.png spritesheet.png spritesheet.svg
app/assets/javascripts/application.js で
//= require leaflet //= require easy-button //= require leaflet.draw //= require leaflet.markercluster-src
app/assets/stylesheets/application.css で
//= require leaflet //= require leaflet.draw //= require leaflet-search //= require easy-button //= require MarkerCluster.Default //= require MarkerCluster
leaflet のバージョンは最新の 1.3.4
ほかライブラリも 11 月初旬の時点で最新のもの
追記：
Rails4のProduction環境でのAsset Pipelineで躓いたので検証した
根本的な原因はこれと同じ現象な気がします
JS から画像エラーが出る理由は謎のままですが
CSS の url('images/spritesheet.png') が原因であるとすると
assets 内から require してしまうと assets/application.css に統合されて
その中で images/* をよぶので assets/images/* を参照にいってしまう
public/assets/ はデプロイ時に消去されるので前持っておいておくこともできない
プリコンパイルに画像ファイルをまぜてもサフィックスが付いて名前が変わってしまう
なのでそのサイトのように public 直下の絶対パスに書き換えるか
サフィックスのつかないプリコンパイラをいれるしかない？
Rails ガイドが推奨してる
「外部ライブラリは vendor/assets におく」
というのがそもそもよくないんでしょうか…
すみません記述ミスです 検索はspriteという文字でやってました
URL的にassetsって含んで大丈夫なんでしたっけ？ http://localhost:3000/images/spritesheet.svg ←こちらをブラウザで直打ちするとどうなりますか？
表示されます なのでどこがこのURLを作ってるかを知りたいです
出ているエラーからするとapplication.jsの記述から出ているように思うのですがその観点からはいかがでしょうか？cssに指定されている画像ファイルが存在しない場合もNot Foundは出ますしjsからcssを参照しにいっていっているだけのようにも思います。Qiitaなどの記事を読んだ感じでは指定のディレクトリに各ファイルを配置してapplication.jsとapplication.cssにrequireを書けば使えるようなので本体のファイルを直接さわる必要はなさそうに思います
application.jsの記述から出ているというのはどういう意味でしょうか？ require してるファイルの中身が全部１行のミニマイズされてしまっていて２行目とかかれていてもどこか特定するのが難しい状況で…
>指定のディレクトリに各ファイルを配置して public/assets においた場合デプロイ時に１度削除されてしまいます app/assets においた場合プリコンパイルでハッシュがついてしまうので CSS の固定ファイル名ではアクセスできなくなります… なのでアクセスしてる側のパスを変更するしかないと思って そもそもだれが assets/ ってパスを付与しているかがわかれば原因がわかるかなと思ったのですが
誰も付与してなくて、相対パスだからだと思います。きちんと置いて読み込ませれば作動するものと思います。 >そもそもだれが assets/ ってパスを付与しているか
leaflet の導入手順と実際のディレクトリ構成（関係ファイルの配置）を提示されると回答のためのヒントになるかもしれません。
leaflet のバージョンもあわせてご提示いただければと。
回答2件
0
「手順」部分ですがこちらの記事も参考にしてみてください。
特にこのあたり、配置ですが、質問者さんが置かれた状況と違うようです。
leaflet.js => /vendor/assets/javascripts
leaflet.css => /vendor/assets/stylesheets
Imageについては/vendor/assets/にimagesディレクトリを作成し、中身を移動する。
※Ruby環境が手元にあるわけではないので既存の記事との比較のみです。試してみてできないようでしたらすみません。
投稿2018/12/11 07:09
総合スコア80850
L.Icon.Default.imagePath = "/assets"; なんていう設定が leaflet についているんですね… これを使えばできそうです ありがとうございました
解決に繋がりそうで何よりです
んー すみません
やはりJSが直接assets付きのパスをさわりにいってるみたいで…
L.Icon.Default.imagePath をつけても CSS の URL を全部変更してみたのですが直らなかったです
0
ベストアンサー
「４０４を出しているJSの場所を調べたい」という質問意図とは異なるのですが
結局そのサイトにある
non-stupid-digest-assets
を使って画像自体を assets 内にいれてファイル名をそのまま public/assets 内に生成する
という方法で４０４エラー自体は解決はしました
標準で推奨されている方法が
外部ジェムに頼らないと実現できないのは釈然としないですが…
投稿2018/12/13 03:29
編集2018/12/13 03:32退会済みユーザー
総合スコア0
>標準で推奨されている方法が
外部ジェムに頼らないと実現できないのは釈然としないですが…
そのあたりはRailsというフレームワークに載せる以上は仕方のないことなのかなと思います。
規約なりルールなり則る必要がありますからね…。なるべく管理下でやりたいでしょうし。
あなたの回答
tips
プレビュー
