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:""}

    }

},