vue 先请求api再进行插值，请求完成之前 插值报错

Question

代码如下：

<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"，所以请教一下如何进行改进？

Answer 1

data () {
    return {
        message: {image:""}
    }
},

Answer 2

this.message.image = this.message.image?this.message.image.replace(/http\w{0,1}:\/\/p/g,'https://images.weserv.nl/?url=p') :"";