vue-resource获取数据绑定src属性报错【已解决】

调用的是豆瓣v2电影接口，做的是电影详情页。
点击某个电影进入详情页发起请求。
html（页面图片都正常显示出来了，但是控制台会报错，逼死强迫症）

<div class="head-img">
  < img : src = "movieDetail.images.medium" />
</div>

js部分

data () {
  return {
    movieDetail: {}
  }
},
created () {
  this.$http.jsonp('https://api.douban.com/v2/movie/subject/'+this.$route.params.id).then( (res) => {
    this.movieDetail = res.data
  }).catch(error => {
    console.log( error)
  })
}

QQ图片20170602090257.png

但是如果js部分这样写，控制台就不会报错

<div class="head-img">
  < img : src = "movieSrc.medium" />
</div>

data () {
  return {
    movieDetail: {},
    movieSrc:{},
    movieAka:[],
    movieRating:{}
  }
},
created () {
  this.$http.jsonp('https://api.douban.com/v2/movie/subject/'+this.$route.params.id).then( (res) => {
    this.movieDetail = res.data
    this.movieSrc = res.data.images
    this.movieAka = res.data.aka
    this.movieRating = res.data.rating
    this.$nextTick(() => {
      this._initPics()
    })
  }).catch(error => {
    console.log( error)
  })
}

最后解决问题的原因是：

初始化定义的movieDetail是一个空对象。
而ajax请求是异步的，页面在渲染的时候，数据还没请求好，这个时候movieDetail还是一个空对象， movieDetail.images就是一个undefined，然后 movieDetail.images.medium就相当于 undefined.medium就会报错。
后面ajax请求成功之后，movieDetail有值了，vue检测数据变化就会更新视图，也就能看见图了。
后来单独把movieSrc定义成一个空对象，在数据没请求成功之前，空对象是不会报错的。