vue2.0動態綁定圖片src屬性值初始化時報錯

在vue2.0中，經常會使用類似這樣的語法 v-bind:src = " imgUrl "（縮寫 :src = " imgUrl "），看一個案例

<template>
    <div>
        <img :src="imgUrl">
    </div>
</template>

<script>
export default {
    data(){
        return {
            captcha_id: "" 
        }
    },
    computed: {
        imgUrl(){
            return ' http://www.demo.com/static/ '+ this.captcha_id + '.png'
        },
    },
    methods: {
        init(){
                // 此處省略一個請求 ，假設成功返回數據為 res
                this.captcha_id = res.data.captcha_id;
        },
    }   
    created(){
        this.init();
    }
}

</script>

<style lang="scss" scoped>

</style>    

如以上案例，由於數據字段 captcha_id  需要通過網絡請求取得，而頁面很可能已經渲染完成，結果導致每一次加載都會出現404錯誤，

其中圖片的src屬性值初始化時被解析為  ' http://www.demo.com/static/.png'  。

解決方式如下：

computed: {
        imgUrl(){
            if(this.captcha_id){
                return this.$store.state.cmnUrl +'/v1/cmn/captcha/new/' + this.captcha_id + '.png'
            }else{
                return null;
            }
        },
    },