[bug]: Avatar not loading image. onError event not firing. #8240
Description
Describe the bug
When using the AvatarImage component, the image falls back to the fallback view even though the image is valid.
<Avatar
className={`h-8 w-8 rounded-lg ${shouldBlink ? "avatar-blink" : ""}`}
>
<AvatarImage
src={user?.image || undefined}
alt={user?.name}
onError={(e) => {
console.log("Error loading image", e);
}}
/>
<AvatarFallback className="rounded-lg">
{user?.name ? user.name.charAt(0).toUpperCase() : "?"}
</AvatarFallback>
</Avatar>
Affected component/components
Avatar
How to reproduce
Use https://lh3.googleusercontent.com/a/ACg8ocIFZ9N-cYNxaMBzEekislOH05mjt76EJ3ekiiDsIhj9iUJVsLc_=s96-c as an example.
Codesandbox/StackBlitz link
No response
Logs
System Info
ChromeBefore submitting
- I've made research efforts and searched the documentation
- I've searched for existing issues