本番環境で画像が反映がされない!?(JSで画像の切り替え）

　今回は、アセットパイプラインというフレームワークによって、エラーがでて苦戦したのでその共有させていただきます。まず、はじめに今回の方法は記述が長くなり、見た目があまり良くないので正直おすすめはしないです...

むしろおすすめな解決方法があれば、ご教授頂けると助かります！！！笑

 はじめにアセットパイプラインとは？

　javascriptやcss、画像ファイルといったHTMLに付随したファイルを連結したり圧縮することで効率的にアクセスできるようにするフレームワークのことです。

これに関してあまり知識がなかったので、ネットで検索して確認してみると本番環境ではassets内のSCCファイルやJsファイルが最小化され、Public下で管理されるとのこと。つまり、ローカル環境で指定していた画像のパスとデプロイ後の本番環境でのパスが変わります。

今回は、マウスホバーすると画像が切り変わる実装を行っています。

まず、記述とエラー内容はこちらです。

404エラーが出てしまい、画像の指定しているページがないですよ...と言われてしまい、画像の表示ができませんでした。

1.本番環境用のパスを調べます。

上記の記述をすると、画像のパスが確認ができます↓

最初にもお伝えしましたが、本番環境では、Public下で管理されるので、上記の記述で確認方法になっています。myapp5は、私のアプリ名なのでみなさんのアプリ名に変更をお願いします笑

2.パスが確認できたので、今までローカル環境のパスの部分を本番環境のパスに変更します。

画像が小さくてすみません...

5行目と9行目の部分を変更しています（かなり長いです）

この記述変更により、ローカル環境と本番環境にも画像の切り変えの反映が無事にできました！みなさんも同じような事例で困ってしまった際、一つの案として知ってもらえたらと思います。

今回は、正直ネットで調べたことを一つ一つ確認して実装を行いましたが苦戦したのち、このような記述にしました。

これに関したら、もっと良い記述があると思うので、もう一度アセットパイプラインについて知識の深掘りをしたいと思います。

本日も記事をみていただいてありがとうございました！！もし、記事の内容での誤りやご質問等ありましたら、お気軽にお待ちしております。