在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; } }, },
原文:http://www.cnblogs.com/hcxy/p/7563438.html