Help us understand the problem. What is going on with this article?

[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 プロパティが設定されないという事。

nonstyle.png

↑ 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.$

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした