diff --git a/package/component/src/component/avatar/index.vue b/package/component/src/component/avatar/index.vue
index 5483e423..5f8f1012 100644
--- a/package/component/src/component/avatar/index.vue
+++ b/package/component/src/component/avatar/index.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { computed } from "vue";
+import { computed, useSlots } from "vue";
 export default {
   name: "LayAvatar",
 };
@@ -7,7 +7,6 @@ export default {
 
 <script setup lang="ts">
 import "./index.less";
-
 export interface LayAvatarProps {
   src?: string;
   size?: "xs" | "sm" | "md" | "lg";
@@ -27,8 +26,14 @@ const classes = computed(() => {
     props.size ? `layui-avatar-${props.size}` : "",
   ];
 });
+const slot = useSlots();
 </script>
 
 <template>
-  <img :alt="alt" :src="src" :class="classes" />
+  <span v-if="!slot.default" :class="classes">
+    <img :alt="alt" :src="src"   />
+  </span>
+  <span :class="classes" v-else >
+    <slot></slot>
+  </span>
 </template>
diff --git a/package/component/src/component/avatarList/index.vue b/package/component/src/component/avatarList/index.vue
index 5fdea488..4e30f2cd 100644
--- a/package/component/src/component/avatarList/index.vue
+++ b/package/component/src/component/avatarList/index.vue
@@ -1,10 +1,13 @@
 <script lang="ts">
+import { computed, CSSProperties, useSlots, useAttrs } from "vue";
 export default {
   name: "LayAvatarList",
 };
 </script>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const slot = useSlots();
+</script>
 
 <template>
   <div class="layui-avatar-list">