vue 先請求api再進行插值，請求完成之前 插值報錯

代碼如下：

<template>
    <div id="content">
        <header :style="'background:url('+message.image+') center /cover'">
            <p>{{message.title}}</p>
        </header>
        <div v-html="message.body"></div>
    </div>
</template>

<script>
export default {
    name: 'Contents',
    data () {
        return {
            message: null
        }
    },
    mounted: function () {
        this.axios({
            method: "get",
            url: "https://zhihu-daily.leanapp.cn/api/v1/contents/"+this.$store.state.id,
        })
        .then(e => {
            this.message = e.data.CONTENTS
            console.log(this.message)

            // 解決訪問api圖片403禁止訪問問題  , 使用網站來處理給你返回的圖片api地址
            if(this.message.image !== undefined){
                this.message.image = this.message.image.replace(/http\w{0,1}:\/\/p/g,'https://images.weserv.nl/?url=p') ;
            }
        })
        .catch(e => console.log(e));
        console.log(this.$store.state)
    }
}
</script>

頁面會報錯 Cannot read property 'image' of null"，所以請教一下如何進行改進？