Как визуализировать объект изображения на Vue

Question

Можно ли визуализировать объект изображения, который имеет опору источника ??

<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>

Я просто хочу знать, загружен ли источник реквизита, тогда я его отрендеру. иначе я сделаю что-то еще, но я не включил это в фрагмент.

Спасибо!

Answer 1

Вы можете сделать

<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>