よくあるのは値( url()）の指定方法がちょっと特殊だというもの。
Vue.jsでbackground-imageを指定する - Qiita
しかしそれでも上手く行かなかった。
原因
URLに ( )が含まれていた。
See the Pen Vue style binding test 1 by ふくい 👨💻 (@var_fukui) on CodePen.
もっと詳しく
URLには encodeURIをかましているので問題ないと思いこんでいたが、実はこの関数、
encodeURI は下記以外の全ての文字をエスケープします。
エスケープされないもの:
A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #
参考：encodeURI() - JavaScript | MDN
RFC2396 という基準に沿っているので ( )をエンコードしてくれない。
この話自体は割と有名かもしれないが、問題は v-bind:style で ( )付きの URL を background-imageに設定してしまうと、要素の style 属性に background-imageプロパティが設定されないという事。
↑ style 属性が空なので、style 属性ごとごっそり削除されている。
解決策
- 画像 URL に
()を使わない - RFC3986 準拠（
! ' ( ) *も対象）のencodeURIを自分で定義する
fixedEncodeURI.js
functionfixedEncodeURI(str){returnencodeURI(str).replace(/[!'()*]/g,function(c){return'%'+c.charCodeAt(0).toString(16);});}参考：encodeURIComponent() - JavaScript | MDN
☕
そもそも際どい文字はファイル名として使わないのがベターですが、サービスのユーザーが直接アップロードする形式のアプリなんかだとファイル名そのままにしちゃってること多いですよね。
何かの助けになれば幸いです。
$Thank$ $you.$