x-avatar-upload
A circular avatar picker with a built-in crop-and-resize modal. Click the circle to choose a JPG or PNG, position it, and the cropped image syncs to a Livewire property.
Click the circle to choose a JPG or PNG; crop and resize before it's applied.
<div class="flex items-center justify-center gap-8">
<x-components.avatar-upload :size="20" />
<x-components.avatar-upload :size="20" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&h=200&fit=crop&crop=faces" />
</div>
| Prop | Type | Default | Description |
|---|---|---|---|
src
|
text |
—
|
Current avatar URL, shown as the initial preview. |
size
|
text |
14
|
Diameter on Tailwind's numeric scale (14 → 3.5rem / 56px). |
wireTarget
|
text |
—
|
Livewire property to set with the cropped base64 PNG after applying. |
placeholder
|
text |
—
|
Fallback image URL shown when src is empty. |