repod/src/components/Discover/TopItem.vue

<template>
	<router-link :to="toUrl">
		<img :alt="`${title} - ${author}`"
			:src="imageUrl"
			:title="author">
	</router-link>
</template>

<script>
export default {
	name: 'TopItem',
	components: {},
	props: {
		author: {
			type: String,
			required: true,
		},
		imageUrl: {
			type: String,
			required: true,
		},
		link: {
			type: String,
			required: true,
		},
		title: {
			type: String,
			required: true,
		},
	},
	computed: {
		toUrl() {
			return `/${btoa(this.link)}`
		},
	},
}
</script>

<style scoped>
	img {
		height: 100%;
		width: 100%;
	}
</style>