如何在 Vue 上渲染图像对象

Question

是否可以渲染具有 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>

我只是想知道道具源加载了没有，我会渲染它。否则我会渲染其他东西，但我没有将它包含在代码片段中。

谢谢！

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 上渲染图像对象

How to render Image Object on Vue

vuejs2

nuxt.js