How to render Image Object on Vue

Question

Is it possible to render an image object that has prop of source??

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

I just want to know if the props source is loaded then, i will render it. otherwise Ill render something else, but i didnt include it on the snippet.

Thanks!

artoju · Accepted Answer · 2018-11-15 11:57:03Z

5

You can do

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

Or with placeholder image.

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

edited Nov 15, 2018 at 11:57

answered Nov 15, 2018 at 11:37

artoju

1,72113 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to render Image Object on Vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related