Avatar
Fallback On Error
Аватар, который переходит на инициалы по настоящей ошибке загрузки: у фотографии остаётся честный alt, а на её месте не появляется значок сломанной картинки.
- avatar
- fallback
- image
- error
Превью
1440pxHost theme
Использовать с AI
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из registry.
размести это в шапке: https://vibeui.ru/c/avatar-029
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
# Установка и размещение «avatar-029» (Fallback On Error) из VibeUI
## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/avatar-029.json
Registry item: https://vibeui.ru/r/avatar-029.json
Ставится в: components/vibeui/avatar-029.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.
Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.
## 2. Что это
Аватар, который переходит на инициалы по настоящей ошибке загрузки: у фотографии остаётся честный alt, а на её месте не появляется значок сломанной картинки.
Аватар с подменой фотографии инициалами по ошибке загрузки: настоящий alt у картинки, role="img" с именем после сбоя. Ноль зависимостей, один файл.
## 3. Как использовать
import { Avatar029 } from "@/components/vibeui/avatar-029"
<Avatar029 name="Илья Мохов" src="/people/ilya.jpg" size="md" />
Полный список пропсов — в установленном файле.
## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.
Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)
## 5. Сохранить как установлено
- локальную палитру --vibeui-avatar-029-* и не подменять её токенами вашей темы
- обработчик onError вместо инициалов-подложки: только он позволяет оставить у фотографии честный alt
- role="img" с aria-label после сбоя — иначе кружок с двумя буквами прочитается как набор букв
- равенство пустого src и ошибки: два разных пути к одному и тому же результату не нужны
- object-fit: cover — портрет в круге иначе растянется
- обычный <img> вместо next/image: компонент обязан работать в любом React-проекте
## 6. Можно менять
- name — имя человека, из него же берутся инициалы и цвет
- ссылку на фотографию через src
- размер через size — sm, md или lg
- оттенок подложки, если у вас своя палитра
## 7. Правила
- Компонент клиентский именно из-за onError: если клиентский код в этом месте недопустим, берите вариант с инициалами-подложкой.
- Повторная попытка загрузки не делается: сменился src — сбросьте состояние ключом на компоненте.
- Инициалы берутся из первых двух слов имени: для одного слова получится одна буква, это нормально.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.
## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.Для разработчика
npx shadcn@latest add https://vibeui.ru/r/avatar-029.jsonhttps://vibeui.ru/r/avatar-029.jsonКомпонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-avatar-029-*. Клиентский: "use client" и useState держат факт сбоя. Соседний вариант кладёт инициалы подложкой и обходится без JS, но платит за это пустым alt — фотография там обязана молчать. Здесь ошибка ловится onError, поэтому у картинки остаётся alt с именем, а после сбоя корень сам получает role="img" с aria-label. Пустой src считается тем же случаем: проверять «есть ли фото» дважды незачем.
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
"use client"
import { useState } from "react"
import type { ComponentPropsWithoutRef, CSSProperties } from "react"
export type Avatar029Props = Omit<
ComponentPropsWithoutRef<"span">,
"children"
> & {
name?: string
src?: string
size?: "sm" | "md" | "lg"
}
// Идея компонента: подмена фотографии инициалами по настоящей ошибке загрузки.
// Соседний вариант кладёт инициалы подложкой и обходится без JS, но платит за
// это пустым alt: фотография там обязана молчать. Здесь ошибка ловится onError,
// поэтому у картинки остаётся честный alt с именем, а после сбоя вместо неё
// появляются инициалы — не значок сломанного изображения и не дырка в строке.
// Пустой src считается тем же случаем: проверять «есть ли фото» дважды незачем.
const STYLES = `
:where([data-vibeui-block="avatar-029"]){
--vibeui-avatar-029-size:2.75rem;
--vibeui-avatar-029-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="avatar-029"]{
display:inline-flex;align-items:center;justify-content:center;flex:none;
overflow:hidden;
width:var(--vibeui-avatar-029-size);height:var(--vibeui-avatar-029-size);
border-radius:9999px;
background:oklch(0.9 0.06 var(--vibeui-avatar-029-hue,265));
color:oklch(0.36 0.12 var(--vibeui-avatar-029-hue,265));
font-family:var(--vibeui-avatar-029-font);
font-size:calc(var(--vibeui-avatar-029-size) * 0.34);font-weight:700;line-height:1;
}
[data-vibeui-block="avatar-029"] [data-part="photo"]{
width:100%;height:100%;object-fit:cover;display:block;
}
[data-vibeui-block="avatar-029"][data-size="sm"]{--vibeui-avatar-029-size:2rem}
[data-vibeui-block="avatar-029"][data-size="lg"]{--vibeui-avatar-029-size:4rem}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="avatar-029"] *{animation:none!important;transition:none!important}}
`
function hue(name: string) {
let hash = 2166136261
for (const symbol of name) {
hash ^= symbol.codePointAt(0)!
hash = Math.imul(hash, 16777619)
}
return ((hash >>> 0) % 12) * 30
}
function initials(name: string) {
return name
.split(" ")
.slice(0, 2)
.map((part) => part.charAt(0).toUpperCase())
.join("")
}
/**
* Аватар, который сам переходит на инициалы по ошибке загрузки фотографии.
* Один файл, ноль зависимостей, собственная палитра.
*/
export function Avatar029({
name = "Илья Мохов",
src = "",
size = "md",
className,
style,
...props
}: Avatar029Props) {
const [failed, setFailed] = useState(false)
const showPhoto = src !== "" && !failed
const palette = {
"--vibeui-avatar-029-hue": hue(name),
...style,
} as CSSProperties
return (
<>
<style href="vibeui-avatar-029" precedence="medium">
{STYLES}
</style>
<span
{...props}
data-vibeui-block="avatar-029"
data-size={size}
data-fallback={!showPhoto}
className={className}
style={palette}
role={showPhoto ? undefined : "img"}
aria-label={showPhoto ? undefined : name}
>
{showPhoto ? (
// Настоящий alt: фотография не обязана молчать, как в вариантах без JS.
<img
data-part="photo"
src={src}
alt={name}
loading="lazy"
decoding="async"
onError={() => setFailed(true)}
/>
) : (
<span aria-hidden="true">{initials(name)}</span>
)}
</span>
</>
)
}