【Vue.js】imgタグのwidth,heightにパーセント(%)を指定してはいけない

結論

Vue.jsで<img :width="hoge" :height:"foo">のようにwidht,heightをバインドする時、hoge,fooに100%などのようにパーセンテージは渡せない。必ず数字だけを渡すこと。
HTML５においてimgタグのwidth,heightに単位は指定できず単位なし数値しか指定できない。もしパーセンテージで指定したいならcssで指定する。
VueはこのHTML5の仕様に（おそらく）厳密に従っているのでこのような仕様になっている。

背景

v-bindでimgタグのwidthとheightをVueから指定しようとして以下のコードを書いたがうまくいかなかった

hoge.html

<div id="app">
    <img v-bind:src="path" alt="ロゴ画像"
    :width="width" :height="height" />
</div>

hoge.js

Vue.createApp({
    data() {
        return {
            path: '',
            width: '30%',
            height: '30%',
        }
    },
    methods: {
        onclick() {
            this.message = new Date().toLocaleString();
        }
    }
}).mount('#app');

widthやheightに30%が入ると思ったが、0だった

調べてみた

以下でHTML4.1を使用してない限りはパーセンテージは使えないというコメントがあった。

MDNを見ると確かに単位無しで指定しろと書いてある

まとめ

そもそもHTML5ではimgタグのwidth,heightに単位をつけて指定できないため、Vueでも渡せない

各ブラウザは基本的にうまいこと後方互換性みたいなの出来るようになってるから、直接HTML書いてる時とかは特に意識せずに済んでた。
今まで当たり前のようにimgタグにパーセンテージ使ってたので、今後は気をつけようと思う。