Skip to content

Instantly share code, notes, and snippets.

@RioChndr
Created March 16, 2022 04:59
Show Gist options
  • Save RioChndr/b4ddd84f0c0fb4d39e52f397928a5f88 to your computer and use it in GitHub Desktop.
Save RioChndr/b4ddd84f0c0fb4d39e52f397928a5f88 to your computer and use it in GitHub Desktop.
<template>
<div class="ui-image" :style="getStyle()">
</div>
</template>
<script>
export default {
props: {
src: {
type: String,
required: true,
default: null
}
},
methods: {
getStyle(){
if(!this.src) return null
return {
backgroundImage: `url(${this.src})`
}
}
}
}
</script>
<style scoped>
.ui-image {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment