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>

我只想知道props源是否已加载，那么我将对其进行渲染。否则我会渲染其他东西，但是我没有将其包含在摘要中。

谢谢！

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>

如何在Vue上渲染图像对象

1 个答案: