Avatar Component Prompts

1export function Avatar({ src, name, size = "md" }) {
2  const [failed, setFailed] = useState(false);
3  return failed || !src
4    ? <span className={box[size]}>{initials(name)}</span>
5    : <img src={src} alt={name} onError={() => setFailed(true)} />;
6}

1import Image from "next/image";
2
3<Image
4  src={src}
5  alt={name}
6  width={40}
7  height={40}
8  className="rounded-full object-cover"
9/>

1function TeamPage() {
2  return (
3    <AvatarGroup users={members} max={4} size="md" />
4  );
5}

1<template>
2  <img v-if="!failed" :src="src" :alt="name"
3       @error="failed = true" class="rounded-full" />
4  <span v-else class="rounded-full">{{ initials }}</span>
5</template>

1<script>
2  export let src = null;
3  export let name;
4  let failed = false;
5</script>
6
7{#if src && !failed}
8  <img {src} alt={name} on:error={() => failed = true} />
9{:else}<span>{initials(name)}</span>{/if}

1<span class="relative inline-flex">
2  <img class="h-10 w-10 rounded-full object-cover"
3       src="/u/maya.jpg" alt="Maya Rahman" />
4  <span class="absolute bottom-0 right-0 h-3 w-3
5               rounded-full bg-emerald-500 ring-2 ring-white"></span>
6</span>