javascriptで背景画像の変更を実現したいのですが、404エラーが解消できません。

Question

前提・実現したいこと

javascriptでif文とdocument.body.style.backgroundImageを記述し、if文で背景イメージが変わる機能を実現したかったのですが、imageが引っ張れずにコンソール上にはエラーが出ます。backgroundColorはうまくいくのですが、画像だけがうまくいかず、パスの指定もいろいろ試してはみたのですが、表示されませんでした。
何かご教授いただければ幸いです。

発生している問題・エラーメッセージ

GET http://localhost:3000/assets/images/img_001.jpg 

該当のソースコード

function background_change(){
  count = count + num;
  if (count < 3)
    {}
  else
  {
    document.body.style.backgroundImage = "url('../../../assets/images/img_001.jpg')";
  }

試したこと

imageファイルのパス指定に自信がなかったのもあり、いろいろなものを試しました。

また、ボタンを作り試してみたところ、微妙にエラー文に変化がありました。

<input type="button" onclick="changeStyle()" value="ボタンで変更" />

function changeStyle(){
document.body.style.backgroundColor="#FFCC80";
document.body.style.backgroundImage="url('../../../assets/images/img_001.jpg')";
}

以下エラー文

jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:5324 GET http://localhost:3000/assets/images/img_001.jpg 404 (Not Found)

前半の文を調べたところ、アセットパイプラインと関係がありそうなのですが、、、

補足情報（FW/ツールのバージョンなど）

Rails 5.0.7.2
影響があるのかわかりませんが、erbファイルのindexページにHTML。scriptタグを使いjsを記述しております。jsをファイルに分けてもエラーが出てしまいます。

Answer 1

前半の文を調べたところ、アセットパイプラインと関係がありそうなのですが、、、

はい、assets/以下のファイルにはハッシュ値が振られるので、そのままの名前ではアクセスできません。

public/以下に置いてアセットパイプラインを回避するか、.js.erbでimage_pathを展開させる（参考）などの手段が必要です。

Comments

[yamakin]

仰る通り、publicに画像を配置したところ切り替わりました。正直image_pathの方は、#some_img（画像ファイルの位置でid属性の指定？）のところがよくわかりませんがもう少し学習をして試してみようと思います。
ずっと手がかりが掴めずにいたので大変助かりました。ありがとうございます！