41 lines
1.2 KiB
Vue
41 lines
1.2 KiB
Vue
<template>
|
|
<div>
|
|
<span
|
|
v-if="photoUrl == ''"
|
|
class="inline-block rounded-full overflow-hidden bg-gray-100"
|
|
:style="'height:' + photoSize + 'rem; width:' + photoSize + 'rem'"
|
|
>
|
|
<svg
|
|
class="h-full w-full text-gray-300"
|
|
fill="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z"
|
|
></path>
|
|
</svg>
|
|
</span>
|
|
<img
|
|
v-else
|
|
class="'inline-block rounded-full border'"
|
|
:style="'height:' + photoSize + 'rem; width:' + photoSize + 'rem'"
|
|
:src="photoUrl"
|
|
:alt="imageAlt"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
imageSize: { type: Number, default: 12 },
|
|
imageAlt: { type: String, default: '' },
|
|
imageUrl: { type: String, default: '' },
|
|
});
|
|
|
|
const photoSize = ref(props.imageSize);
|
|
const photoUrl = ref(props.imageUrl);
|
|
const imageAlt = ref(props.imageAlt);
|
|
</script>
|
|
|
|
<style lang="css" scoped></style>
|