0
0

More than 1 year has passed since last update.

アセットパイプラインで圧縮された画像を、JavaScriptで参照するためのパスの書き方

Last updated at Posted at 2023-02-26

タイトルの内容、
JavaScroptにおける画像ファイルパスの書き方がわからず詰まったので備忘録として残します

結論

imagesまでのパスは抜く

ファイル格納場所が
app/assets/images/hoge.png
の場合は以下のように記述する
/assets/hoge.png

理由はまだわかっていないのですが、
一旦上記方法で対応できました!


以降はアセットパイプラインに対する補足のため、タイトルの内容からは逸れます

①そもそもアセットパイプラインとは?

 画像やJS、CSS。HTMLファイルなどを最小化して連結するためのフレームワーク
 容量が軽くなるだけでなく、作業効率的なメリットも大きいようです (後述)

 ↓詳しい解説(引用:https://qiita.com/uma002/items/9a94ebc93c5f937502cd)

作業がしやすいように画像、javascript、css、htmlファイルを分解つしてコーディングして、最終的に1つのファイルにまとめる仕組みのことです。

普段railsを使うときには意識することはありませんが、htmlファイルはapp/viewsに配置されてjavascriptファイルはapp/assets/javascriptsに配置されていると思います。

このようにファイルは分けて管理した方が、人間にとってはわかりやすいですが、最終的には全て統合して一つのファイルに統合して扱われます。さらに字を詰めることでファイルの容量を最小化する働きがあります。

②なぜアセットパイプラインを通すのか?

 そもそもRailsで画像を格納できる場所は2つあります
  ①app/assetsディレクトリ:アセットパイプラインが通るディレクトリ
  ②publicディレクトリ:アセットパイプラインが通らず(圧縮対象にならず)にファイルが参照できるディレクトリ

 ②に格納した場合、容量の負担増加に加え
 画像を同じファイル名で置き換えた場合に、ブラウザがキャッシュにある画像で済ませてしまうため、
サーバーにある変更後の画像に辿り着かない
 という問題が発生するようです(あくまで一例、それ以外にも問題はあるはず)
 
 そのため、余程のことがない限りアセットパイプラインを通すのが◎になります

参考

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0