[Vue.js] v-bind:style で background-image がバインドできなかったら

よくあるのは値( 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

function fixedEncodeURI (str) {
  return encodeURI(str).replace(/[!'()*]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16);
  });
}

参考：encodeURIComponent() - JavaScript | MDN

☕

そもそも際どい文字はファイル名として使わないのがベターですが、サービスのユーザーが直接アップロードする形式のアプリなんかだとファイル名そのままにしちゃってること多いですよね。
何かの助けになれば幸いです。

$Thank$ $you.$