Vuejs2 如何在Vue上渲染图像对象

是否可以渲染具有源属性的图像对象

<template>
  <div v-html="image">
    {{ image }}
  </div>
</template>
<script>
export default {
  data () {
    return {
      image: new Image(),
      loading: true
    }
  },
  props: ['source'],
  created () {
    console.log(this.image)
    if (this.image) {
      this.image.onload = function (event) {
        console.log(event)
      }
      this.image.src = this.image
    }
    // this.src = this.image
  }
}
</script>

<style>

</style>

我只是想知道如果道具源加载，然后，我会渲染它。 否则，我将呈现其他内容，但我没有将其包含在代码段中

谢谢

你能行

<template v-if="source">
    <img :src="source"/>
</template>
<template v-else>
 //something else
</template>

或使用占位符图像

<template>
  <div>
    <img :src="image"/>
  </div>
</template>
<script>
export default {
  mounted: function() {
    if (this.source) { //is it empty
      this.image = this.source //replace placeholder
    }
   this.loading = false
  },
  data () {
    return {
      image: somePlaceholderImage,//url for placeholder image
      loading: true
    }
  },
  props: ['source'],
}
</script>

<style>

</style>