nyarn.tech

にゃーん

Vue.jsでimgタグのsrcにbindするときの注意

vueのバインディング

サンプルコードです。
imgタグのsrcになんらかの値をバインディングしています。

<div id="app">
    <img v-bind:src="image_src">
</div>
new Vue({
    el: '#app',
    data: {
        visible: true;
    },
    computed: {
        image_src: function () {
            if (this.visible) {
                return 'path/to/img.jpg';
            }
        }
    }
});

こんなコードを書いたとします。
これなら v-show 使ったほうがよくない?っていうツッコミはとりあえず無しです

Safariだけimgが残る問題

(OSXの)ChromeFirefoxではvisibleがfalseになったときは
renderされるhtml(imgタグ)は

<img>

のみになるため、画像は表示されません。

一方safariだと

<img>

で一見消えてくれそうなのですが、表示されたままになります。/(^o^)\ナンテコッタ

ちなみにimage_srcの中で nullや false を返しても同じでした。

image_srcみたいなメソッドをつくるときって Vueに渡しているデータの値に応じて表示・非表示を切り替えたり、表示する画像を変えたいときだと思うので、ちょっと困りますね。

解決策

とりあえずカッコ悪いのですが v-show にも image_src を渡すようにしました。

<div class="app">
    <img v-bind:src="image_src" v-show="image_src">
</div>

一応sampleを作ったのでsafariと他のブラウザで確認いただけます。
jsfiddle.net