first

inspond-nuxt-safekiso/base/components/BaseAvater1.vue

@@ -0,0 +1,40 @@
+<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>