是否可以渲染具有 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>
我只是想知道 Prop 源是否已加载,然后我将渲染它。 否则我会渲染其他内容,但我没有将其包含在代码片段中。
谢谢!
最佳答案
你可以做到
<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>
关于vuejs2 - 如何在Vue上渲染图像对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53318545/