mealie/frontend/components/Domain/Recipe/RecipeCardImage.vue

112 lines
2.1 KiB
Vue
Raw Normal View History

<template>
<v-img
v-if="!fallBackImage"
2021-08-02 03:24:47 +00:00
:height="height"
:src="getImage(slug)"
2021-08-02 03:24:47 +00:00
@click="$emit('click')"
@load="fallBackImage = false"
@error="fallBackImage = true"
>
<slot> </slot>
</v-img>
2021-08-02 03:24:47 +00:00
<div v-else class="icon-slot" @click="$emit('click')">
<v-icon color="primary" class="icon-position" :size="iconSize">
{{ $globals.icons.primary }}
</v-icon>
2021-08-02 03:24:47 +00:00
<slot> </slot>
</div>
</template>
<script>
2021-08-10 00:19:23 +00:00
import { useStaticRoutes } from "~/composables/api";
import { useApiSingleton } from "~/composables/use-api";
export default {
props: {
tiny: {
type: Boolean,
default: null,
},
small: {
type: Boolean,
default: null,
},
large: {
type: Boolean,
default: null,
},
iconSize: {
2021-08-02 03:24:47 +00:00
type: [Number, String],
default: 100,
},
slug: {
2021-08-02 03:24:47 +00:00
type: String,
default: null,
},
imageVersion: {
2021-08-02 03:24:47 +00:00
type: String,
default: null,
},
height: {
2021-08-02 03:24:47 +00:00
type: Number,
default: 200,
},
},
2021-08-02 03:24:47 +00:00
setup() {
const api = useApiSingleton();
2021-08-02 03:24:47 +00:00
2021-08-10 00:19:23 +00:00
const { recipeImage, recipeSmallImage, recipeTinyImage } = useStaticRoutes();
return { api, recipeImage, recipeSmallImage, recipeTinyImage };
2021-08-02 03:24:47 +00:00
},
data() {
return {
fallBackImage: false,
};
},
computed: {
imageSize() {
if (this.tiny) return "tiny";
if (this.small) return "small";
if (this.large) return "large";
return "large";
},
},
watch: {
slug() {
this.fallBackImage = false;
},
},
methods: {
getImage(slug) {
switch (this.imageSize) {
case "tiny":
2021-08-10 00:19:23 +00:00
return this.recipeTinyImage(slug, this.imageVersion);
case "small":
2021-08-10 00:19:23 +00:00
return this.recipeSmallImage(slug, this.imageVersion);
case "large":
2021-08-10 00:19:23 +00:00
return this.recipeImage(slug, this.imageVersion);
}
},
},
};
</script>
<style scoped>
.icon-slot {
position: relative;
}
.icon-slot > div {
top: 0;
position: absolute;
z-index: 1;
}
.icon-position {
opacity: 0.8;
display: flex !important;
position: relative;
margin-left: auto !important;
margin-right: auto !important;
}
</style>