【css】 本番環境で背景画像が表示されない(background-image)

背景画像を設定していたが、ローカル環境では表示できるのに本番環境でのみ表示できない事象が発生した。
エラー表示もなく、ただ背景画像が空白状態であった。

background-image: url(/assets/bg-mainVisual-pict_pc.jpg);

調べてみると以下のパラメータに変更すると、ローカルでも本番環境でも背景画像を表示できた。

background-image: image-url("bg-mainVisual-pict_pc.jpg");

理屈がよくわかっていないが、以下の参考記事によるとアセットパイプラインによる設定が原因で本番環境では表示されなくなってしまったとのこと

https://yamaguchi-t.hatenablog.com/entry/2019/10/15/205922

やはり開発環境を本番環境へデプロイする時は何かしら不具合が発生することは計算した上で開発をしていきたいものだ。